# Resizing p5.Graphics

**URL:** <https://discourse.processing.org/t/resizing-p5-graphics/8068>\
**Category:** Coding Questions\
**Created:** [February 3, 2019, 11:49am UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068 "2019-02-03T11:49:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![marksan](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@marksan](https://discourse.processing.org/u/marksan)\
**Post date:** [February 3, 2019, 11:49am UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/1 "2019-02-03T11:49:55Z")

</div>

Hi all ,

I have a use case in which I draw few small dots ( graphics.ellipse(…) ) on p5.graphics ( for efficiency purpose ) . now on resizing the window I want to resize the graphics along with it’s content ( those small dots ) .

I tried to use resize funs on graphics but it doesn’t seems to b working .  
Has any one ever faced such issue or any one can guide on what can be done to achieve this

thanks in advance

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 3, 2019, 12:33pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/2 "2019-02-03T12:33:31Z")

</div>

[p5js.org/reference/#/p5.Element/size](http://p5js.org/reference/#/p5.Element/size)

---

<div class="post-metadata">

**Author:** ![marksan](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@marksan](https://discourse.processing.org/u/marksan)\
**Post date:** [February 3, 2019, 1:01pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/3 "2019-02-03T13:01:54Z")

</div>

Hi GotoLoop

I tried this but still no luck .

function setup() {  
createCanvas(maxWindowWidth, maxWindowHeight);  
graphics = createGraphics(width, height);

}

function windowResized() {

```
// canvas is getting resized as expected
resizeCanvas(windowWidth, windowHeight);

// tried but no luck
graphics.size(windowWidth,windowHeight);

```

}

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 3, 2019, 1:08pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/4 "2019-02-03T13:08:15Z")

</div>

> [@marksan](#):
>
> `graphics.size(windowWidth, windowHeight);`

Shouldn’t you use _width_ & _height_ instead as you did for:  
`graphics = createGraphics(width, height);`

`graphics.size(width, height);`

---

<div class="post-metadata">

**Author:** ![marksan](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@marksan](https://discourse.processing.org/u/marksan)\
**Post date:** [February 3, 2019, 1:10pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/5 "2019-02-03T13:10:03Z")

</div>

Tried that too , but still there is no effect on the graphics size .

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 3, 2019, 1:12pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/6 "2019-02-03T13:12:07Z")

</div>

Why don’t you post your whole code, including **draw()**?  
Better yet, host it on: [OpenProcessing.org/sketch/create](http://OpenProcessing.org/sketch/create)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 3, 2019, 1:23pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/7 "2019-02-03T13:23:53Z")

</div>

not sure if you need anyhow:

```auto

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // disable that for test
  print(" windowinfo width: " + width + " height: " + height + " windowWidth " + windowWidth + " windowHeight " + windowHeight);
}

```

ok, sorry you have already.

---

<div class="post-metadata">

**Author:** ![marksan](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@marksan](https://discourse.processing.org/u/marksan)\
**Post date:** [February 3, 2019, 1:51pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/8 "2019-02-03T13:51:08Z")

</div>

It’s really confusing , I am getting two different type of results .

I tried online [https://www.openprocessing.org/sketch/663800](https://www.openprocessing.org/sketch/663800) and it worked as expected , content was getting resized with the browser resize .

and I copied the same code to my local setup (with same version as on online editor ) and got completely different result .  
1. there is no resize effect .  
2. on resizing i am getting one extra blue dot with white background.

refer the snapshot of these two behaviors

 ![scale_test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f857a721aa0587a956048035d70c9efcacc58416.png)

am i missing anything ?

---

<div class="post-metadata">

**Author:** ![marksan](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@marksan](https://discourse.processing.org/u/marksan)\
**Post date:** [February 3, 2019, 2:33pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/9 "2019-02-03T14:33:35Z")

</div>

Found the issue finally ,

width and height variables contains the dimension of the canvas being created and they only update once you resize the canvas .

whereas windowWidth and windowHeight gets updated as soon as the size of the browser is changed .

therefore use windowWidth and windowHeight …

thanks GoToLoop for suggesting the size() method .

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 3, 2019, 2:41pm UTC](https://discourse.processing.org/t/resizing-p5-graphics/8068/10 "2019-02-03T14:41:41Z")

</div>

in p5.js

```auto
  image(pg,0,0,width,height);

```

works also  
[https://editor.p5js.org/kll/sketches/SkZFY5Qg4](https://editor.p5js.org/kll/sketches/SkZFY5Qg4)