CreateCanvas - actual size is double?

p5.js Beginners
1

if I make a canvas as 400x400 like (copied from p5 editor):

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

and then inspect the canvas element in Chrome I get:

<canvas id="defaultCanvas0" class="p5Canvas" width="800" height="800" style="width: 400px; height: 400px;"></canvas>

You can see this same exact thing on the P5 editor - just click Run and then right click > Inspect the gray box - https://editor.p5js.org/

The style is 400x400, but the actual canvas is 800x800. If I right click and save the canvas and look at the file it is also 800x800.

Is this on purpose? I just updated to the latest p5 library, I don’t think the prior one I was using did this.
Maybe this is for high density displays?

I am creating files that I want to download and have them be a specific pixel dimension so this is throwing me off a bit.

1 Like
2

p5js.org/reference/#/p5/pixelDensity

2 Likes
3

thank you, that looks like it fixed it.

Also seems to be different in different browsers, Chrome was the only one changing it, FF and Edge were not.

1 Like