# Event called when canvas is resized

**URL:** <https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643>\
**Category:** Processing\
**Created:** [December 16, 2018, 1:40am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643 "2018-12-16T01:40:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [December 16, 2018, 1:40am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/1 "2018-12-16T01:40:48Z")

</div>

Hi,

Is there an event that is called when the canvas is resizable, and the canvas is resized? In p5.js there’s `windowResized()`, but I can’t seem to find anything for Processing besides using the native Java functions.

Thanks!

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 16, 2018, 2:26am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/2 "2018-12-16T02:26:45Z")

</div>

As far as I know there’s no built in methods in Processing that have the same functionality of `windowResized()` but there maybe a library that I don’t know of that makes this easier.

Edit: I looked into this more and found there has been talk of [adding a `resize()` method](https://github.com/processing/processing/issues/4540) to Processing however no one has implemented it because it’s difficult to account for all the different renders. I suspect this is also the reason no one has added a `windowResized()` method.

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [December 16, 2018, 3:09am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/3 "2018-12-16T03:09:11Z")

</div>

Thanks for your quick reply! 🙂

I’ll probably just use the standard Java way of doing it then, hopefully, in the future they’ll add an event.

---

<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:** [December 16, 2018, 6:07am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/4 "2018-12-16T06:07:47Z")

</div>

not sure why a event is needed,  
if you make a resizable sketch you just check if it changed  
the easy way

```auto
// example / demos / test / resize /

int mywidth=500, myheight=400;

void settings() {
  // fullScreen();
  size(mywidth, myheight);
}

void setup() {
  // size(400, 400);
  surface.setResizable(true);
  surface.setTitle("myTitle");
}

void draw() {
  background(255, 0, 0);
  ellipse(width/2, height/2, 100, 50); 
  if ( check_window() ) {
    println(" window changed to w: "+width+" h: "+height);
    mywidth = width;
    myheight = height;
  }
}

boolean check_window() {
  boolean changed = false;
  if ( mywidth != width ) changed = true;
  if ( myheight != height ) changed = true;
  return changed;
}

```

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [December 16, 2018, 9:01am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/5 "2018-12-16T09:01:54Z")

</div>

I was considering doing something like that before, but if the frame rate of the program is low, it might not check often enough.

I was looking for a solution just like the p5.js event, but since there doesn’t seem to be one, I’ll probably use it.

Thanks!

---

<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:** [December 16, 2018, 10:01am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/6 "2018-12-16T10:01:08Z")

</div>

hi,  
i try to compare processing and p5.js  
and not see a problem,  
processing resize window resize window and canvas  
p5.js has the need of the event function.

```auto
// https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643

int mywidth=500, myheight=400;

void settings() {
  // fullScreen();
  size(mywidth, myheight);
}

void setup() {
  // size(400, 400);
  surface.setResizable(true);
  surface.setTitle("myTitle");
}

void draw() {
  background(200, 0, 0);
  draw_obj();
  if ( check_window() ) {
    println(" window changed to w: "+width+" h: "+height);
    mywidth = width;
    myheight = height;
  }
}

boolean check_window() {
  boolean changed = false;
  if ( mywidth != width ) changed = true;
  if ( myheight != height ) changed = true;
  return changed;
}

void draw_obj(){
  translate(width / 2, height / 2);
  fill(0,0,200);
  ellipse(0, 0, 80, 50);
  fill(200,200,0);
  ellipse(50, 50, width / 5, height / 10); // test where object size depends on windows
}

```

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

```auto
// https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643

function setup() {
// createCanvas(windowWidth, windowHeight);
  createCanvas(200,200);
}

function draw() {
  background(200, 0, 0);
  draw_obj();
}

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

function draw_obj(){
  translate(width / 2, height / 2);
  fill(0,0,200);
  ellipse(0, 0, 80, 50);
  fill(200,200,0);
  ellipse(50, 50, width / 5, height / 10); // test where object size depends on windows
}

```

but i see possible conflicts about:  
p5.js window resize or browser zoom

add, anyhow for resizable sketches must plan  
carefully if want use objects what size depends on  
that settings, so i make a example with

- a fix radius and
- a window dependable radius

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [December 16, 2018, 2:24pm UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/7 "2018-12-16T14:24:29Z")

</div>

[This](https://forum.processing.org/two/discussion/19876/can-sketch-window-be-resized) shows the same approach using pre().

Kf

---

<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:** [December 18, 2018, 5:02am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/8 "2018-12-18T05:02:08Z")

</div>

Hi @Sarah! Here’s a sketch I’ve been working w/ many months ago. 👷‍♂️  
It’s about creating a class callback which triggers every time the canvas resizes. 🤖  
It’s still experimental. 👨‍🔬 Yet to finish it 💯% . But it’s runnable already: 🏃‍♂️

> <https://gist.github.com/GoToLoop/1d1eb18f468a7d5758469707276b6ea1>

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [December 18, 2018, 7:36am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/9 "2018-12-18T07:36:54Z")

</div>

Thanks, that’s what I needed. Can’t wait till it’s finished!

---

<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:** [December 18, 2018, 7:39am UTC](https://discourse.processing.org/t/event-called-when-canvas-is-resized/6643/10 "2018-12-18T07:39:37Z")

</div>

> [@Sarah](#):
>
> Can’t wait till it’s finished!

It’s just some more refinements and a Python Mode version too. 😇