# Why isn't my canvas resizing in p5.js?

**URL:** <https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 9, 2020, 1:45pm UTC](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466 "2020-10-09T13:45:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [October 9, 2020, 1:45pm UTC](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466/1 "2020-10-09T13:45:35Z")

</div>

Hey everyone, so I was editing my code and I believe when I added the translate function in my function draw, it somehow prevented my text and other contexts of my sketch to resize when I would resize my browser. Not sure what has happened here.  
Would really appreciate if someone could have a look to see my mistake 🙂

```auto
function setup() {
  
  createCanvas (windowWidth, windowHeight);
  background (255);
  
  //colorMode (HSB, 255);
  mode =0; // initially before the artwork animation has begun 

function draw (){
  //clear();
  translate (width/2, height/2);
  
  if (mode==0) {
    
    img.resize (155, 43);
    image (img, windowWidth/2 -885, windowHeight/2 - 541);
    fill (0);
    textAlign (CENTER);
    textSize (50);
    textFont ("Futura");
    text ('N O T I F Y', windowWidth/2 -720, windowHeight/2 -500);
    text ('M Y', windowWidth/2 - 710, windowHeight/2 -400);
    text ('A', windowWidth/2 -1000, windowHeight/2 -290); //windowWidth - 730, windowHeight - 300);
    text ('D', windowWidth/2 -930, windowHeight/2 -320);
    text ('D', windowWidth/2 -860, windowHeight/2 -340);
    text ('!', windowWidth/2 -790, windowHeight/2 -280);
    text ('C', windowWidth/2 -720, windowHeight/2 -320);
    text ('T', windowWidth/2 -650, windowHeight/2 -290);
    text ('!', windowWidth/2 -580, windowHeight/2 -270);
    text ('O', windowWidth/2 -510, windowHeight/2 -300);
    text ('N', windowWidth/2 -440, windowHeight/2 -310);
    text ('.', windowWidth/2 -370, windowHeight/2 -310);
    text ('.', windowWidth/2 -300, windowHeight/2 -310);
    text ('.', windowWidth/2 -220, windowHeight/2 -310);
    
    textSize (15);
    text ('This is an interactive generative artwork based off the data notification that Alice Yu received within a week. Move the sliders around to see what happens! Just have fun with it!',windowWidth/2 -800 ,windowHeight/2 -500, 525, 100);
    text ('Press ENTER to Begin', windowWidth/2 - 810, windowHeight/2 -550);
   
    noFill ();
    strokeWeight (1);
    stroke (0);
   rect (windowWidth/2 -886, windowHeight/2 -539, 155, 40, 50);
   noLoop ();

  }

function windowResized () {
  resizeCanvas (windowWidth, windowHeight);

}

```

---

<div class="post-metadata">

**Author:** ![KaliBrain](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kalibrain/32/10811_2.png) [@KaliBrain](https://discourse.processing.org/u/KaliBrain)\
**Post date:** [October 9, 2020, 5:33pm UTC](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466/2 "2020-10-09T17:33:26Z")

</div>

this is a TON if code to go through. maybe try to isolate the problem so people could maybe help you with the specific misunderstanding you have.

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [October 10, 2020, 3:25am UTC](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466/3 "2020-10-10T03:25:27Z")

</div>

sorry okay! 🙂