[p5.js 2.0+ Bug Report]: createCanvas overrides the value set by pixelDensity

[aymanmh]

Most appropriate sub-area of p5.js?

• Core/Environment/Rendering

p5.js version

2.3.3

Web browser and version

FireFox 156.0.1, Brave 1.96.59 (chromium 154.0.8037.58 )

Operating system

Ubuntu 26.4.1, Android 16

Steps to reproduce this

following this example on the pixelDensity documentation page, calling createCanvas after pixelDensity sets the pixel density back to default, meanwhile the documentation claims otherwise:
https://p5js.org/reference/p5/pixelDensity/

Snippet:

function setup() {
  // Set the pixel density to 3.
  pixelDensity(3);
  console.log("pd:" + pixelDensity()) // logs 3

  createCanvas(100, 100);
  background(200);
  circle(50, 50, 70);

  consoel.log(pixelDensity()) // logs the device default, 1 in my case
}

I've peeked into p5js code, createCanvas reinitializes the renderer and pixel desnisty is reset to device default

inside createCanvas:

      // Init our graphics renderer
      if(this._renderer) this._renderer.remove();
      this._renderer = new renderers[selectedRenderer](this, w, h, true, ...args);

inside Renderer constructor

    const defaultRatio = typeof window !== 'undefined' ?
        Math.ceil(window.devicePixelRatio) :
        1;
      if (isMainCanvas) {
        this._pixelDensity = defaultRatio;
      } else {
        const parentDensity = pInst._pInst?._renderer?._pixelDensity;
        this._pixelDensity = parentDensity || defaultRatio;
      }

If that is the expected behavior then the documentation should be updated to reflect it.

[devnishantt]

I ran into this as described: pixelDensity() before createCanvas() is reset
when the renderer is recreated.

I treated it as a code bug (the docs already show that order) and opened a
fix with P2D + WEBGL tests: #9226

Happy to change the approach if you'd rather store density on the p5 instance.