p5: resize canvas, with a fixed starting width/height?

Admin 1
Viewed 676

I'm playing around with using p5 and tensorflow. I created a "face-filter", that tracks the nose and ears with tensorflow, and append images to those locations. For instance if my face-filter is "clown', the nose will have a red nose, and the ears will have clown ears.

Everything works, but now I'm trying trying to make the canvas responsive.

My canvas dimensions are createCanvas(1200, 768), and it's centered in css.

How can I make the canvas responsive based on browser width? I'm just not sure how to setup the code in the windowResized function.

function windowResized(){
  resizeCanvas(width?, height?);
}

Appreciate any input I could get.

p5.js processing javascript
1 Answers

p5.js provides the system variables windowWidth and windowHeight, width and height. While width and height store the current size of the canvas, windowWidth and windowHeight stores the width of the inner window.
Use windowWidth and windowHeight in windowResized() to resize the canvas:

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

The variables can also be used, when the canvas is created:

function setup() {
  createCanvas(windowWidth, windowHeight);
}
user_55777650
Related