Creating A Canvas In Javascript Based On Variables (with P5.js)

I want to draw a simple canvas based on variables. It works like this: function setup() { createCanvas(600, 600); background(50); } Why does that not work? (a small canvas,

Solution 1:

It doesnt work because height and width are built-in p5 variable names. Try renaming them to something else.

var a = 600;
var b = 600;

functionsetup() {
    createCanvas(a, b);
    background(50)
}

If you are looking to make the canvas the size of the window, you should use windowWidth and windowHeight.

functionsetup() {
  createCanvas(windowWidth, windowHeight);
}

To resize the canvas after setup you should do something like this:

var c;

functionsetup() {
  c = createCanvas(windowWidth-20, windowHeight-20);
}

functiondraw() {
  background(30);
}

functionmousePressed() {
    c.size(windowWidth-20, windowHeight-20);
    console.log(width + " " + height);
}

Solution 2:

From what i have learnt for p5.js Library, I do believe that the width and height variable are dedicated to the canvas created by the createCanvas() and are systems variable, and renaming those variable would most likely solve the problem.