information on reference page about displayWidth seems not correct

[Qiguang]

Topic

Hi all, I'm not sure if it's an appropriate topic here. I‘m just trying to improve the document on p5.js site. But I didn't find a proper place, it's not a bug of code base, not a behavior issue of the site, not a new feature, not a translation error.

on the page, it says:

System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity.

After test, I found that I cannot use displayWidth directly to create a full-screen canvas, when the page was zoomed. Instead, if I want the canvas size full-screen, I should do this

createCanvas(displayWidth/displayDensity(), displayHeight/displayDensity());

And second, to return actual screen size, I don't need multiply displayWidth by pixelDensity. Even I zooming the page, displayWidth is always the actual width.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

After test, I found that I cannot use displayWidth directly to create a full-screen canvas, when the page was zoomed. Instead, if I want the canvas size full-screen, I should do this

When zooming the page, you are changing the displayDensity value while the display width and height stays the same, so if you want your canvas to match the zoomed in state you will need to adjust it by displayDensity which you have done. That is to say this is expected behaviour. displayWidth and displayHeight is the width and height of the display/monitor/projector and not changed by zooming or otherwise.

And second, to return actual screen size, I don't need multiply displayWidth by pixelDensity.

It depends on what you count as actual screen size (assuming high density display), whereas for example a Retina MacBook Pro will have 1440 by 900 display pixels, it actually has (as far as the browser is concerned) 2880 by 1800 pixels. That's what it means by actual screen size, this can be useful when dealing with the pixels array which will have all 2880x1800 pixels in it.