Should width and height of canvas be double?

p5.js
1

I’m using a Macbook pro (with a hidpi display) and just noticed that the width and height properties of the canvas element are double the width and height parameters passed to the createCanvas call. Screenshot attached. Guess this is where the doubling occurs. I would just like to understand if this is a bug or if it is intentional?

Screenshot
Screenshot.png1904×2278 668 KB

1 Like
2

can you try here and play with the browser window size?
https://editor.p5js.org/kll/sketches/hXy_Ij1gB

3

console output when pressing i after resizing window:

windowWidth 826 windowHeight 793 width 826 height 793 
windowWidth 622 windowHeight 592 width 826 height 793 
windowWidth 359 windowHeight 385 width 826 height 793
4

on RASPBIAN linux CHROME see

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

so it might be about your high density screen

5

For high-density displays you can set or get the pixelDensity:

https://p5js.org/reference/#/p5/pixelDensity

1 Like