P5.js: add a note to the p5.Element.size() function that resizeCanvas() should be used if resizing the canvas

[swirly]

Nature of issue?

• [x ] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: 0.5.8
• Web browser and version: Chrome and Firefox , latest version
• Operating System: Mac OSX Mojave
• Steps to reproduce this:

try to create a 1000x1000 virtual screen :

• create a 1000x1000 canvas
• resize to widowHeight or windowWidth, wichever is smaller
• deduce zoom with width/1000
  -> It works perfectly
  after windowResized event, reproduce the same steps, it's a fail. It's as if the origin was moved away, or as if the rectangle is scaled, but not moved ....
  the centered rectangle is no more centered .
  Here is the code to reproduce the bug :

var myCanvas, myZoom;
/* 
virtual 1000x1000 screen 
create screen
get needed zoom
scale
change scale on resize
*/

function setup() {
  myCanvas = createCanvas(1000, 1000);
  makeSize();
}

function draw() {
  scale(myZoom);
  background(0);
  fill(255);
  rect(250, 250, 500, 500); // centered in a 1000x1000 virtual screen
}

function windowResized() {
  makeSize();
}

function makeSize() {
  if (windowWidth > windowHeight) {
    myCanvas.resize(windowHeight, windowHeight);
  } else {
    myCanvas.resized(windowWidth, windowWidth);
  }
  myZoom = width / 1000;
}

[Remcodejong]

Just a formatting tip: try adding 3 ` to the begin and end of code and javascript at the beginning, so it formats it to javascript.

[swirly]

Ok.
Anyway, I've investigated some more and it's not related to scaling. It's really a resize problem, as can be seen with this new code :

function setup() {
  myCanvas = createCanvas(1000, 1000);
  fill(255);
  makeSize();
}

function draw() {
  background(0);

  rect(width / 4, width / 4, width / 2, width / 2);

}

function windowResized() {
  makeSize();
}

function makeSize() {
  if (windowWidth > windowHeight) {
    myCanvas.resize(0.8 * windowHeight, 0.8 * windowHeight);
  } else {
    myCanvas.resize(0.8 * windowWidth, 0.8 * windowWidth);
  }
}

[swirly]

The rectangle should always be centered, and it is not, really.

[swirly]

I've also tested with the buildin p5js function "resizeCanvas", but the result is the same.

[ThatIsAPseudo]

I tested your code in the p5js web editor, I do not see the trouble, the rectangle stays in the middle, same with Processing desktop editor in p5.js mode

However there is definitely an issue with the colors :
Can someone explain why the whole canvas is black when the filland background color values are the same (for ex. 230), but colors become different as soon as theses color values differ by 1 ? We may open another issue
I tested it with codepen too, that gives the same misbehavior (but still no problem concerning the canvas resizing)

[lmccart]

Ah @ThatIsAPseudo I see what you're talking about.

@swirly try this code:

function setup() {
  myCanvas = createCanvas(1000, 1000);
  makeSize();
}

function draw() {
  background(255, 0, 0);
  fill(255);
  rect(width / 4, width / 4, width / 2, width / 2);

}

function windowResized() {
  makeSize();
}

function makeSize() {
  if (windowWidth > windowHeight) {
    myCanvas.resize(0.8 * windowHeight, 0.8 * windowHeight);
  } else {
    myCanvas.resize(0.8 * windowWidth, 0.8 * windowWidth);
  }
}

So it looks like the reason the rectangle seems to be disappearing is because the white fill color is getting lost completely, but the rect is still actually there, it's just black on black background.

as @ThatIsAPseudo suggests, I think we can close this issue and reopen a new one for stroke/fill not getting properly applied after a canvas resize.

[lmccart]

Oh, just an update. I remembered that there is a resizeCanvas() function. which is actually the correct way to resize the canvas. When the code is modified to use this, all seems to work correctly.

function setup() {
  myCanvas = createCanvas(1000, 1000);
  makeSize();
}

function draw() {
  background(0);
  rect(width / 4, width / 4, width / 2, width / 2);
}

function windowResized() {
  makeSize();
}

function makeSize() {
  if (windowWidth > windowHeight) {
    resizeCanvas(0.8 * windowHeight, 0.8 * windowHeight);
  } else {
    resizeCanvas(0.8 * windowWidth, 0.8 * windowWidth);
  }
}

It would be nice to add a note to the p5.Element.size() function that resizeCanvas() should be used if resizing the canvas element only.

[swirly]

Oh, just an update. I remembered that there is a resizeCanvas() function. which is actually the correct way to resize the canvas. When the code is modified to use this, all seems to work correctly.

As I mentionned, I've already tried using resizeCanvas. But I've found the bug is not strictly related to p5js.
I've done a minimal test with you file lmccart, and saw that in my index.html, I load p5play.
Removing p5play makes everything works.
Why the hell is p5play doing something with resize ?

Just add this line in you index.html after p5js :

  <script src="//cdn.jsdelivr.net/p5.play/1.0.0/p5.play.js"></script>

And the rect behaviour will be messy. I think I shall fill a bug in p5 play !

[swirly]

Ok. Let's close the issue ... it's "by design" with the camera function in p5play

https://github.com/molleindustria/p5.play/issues/115