Inconsistent instance mode canvas sizing

[bensgilbert]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.9.4

Web browser and version

126.0.6478.127

Operating system

Windows

Steps to reproduce this

https://editor.p5js.org/bensgilbert/sketches/MTYSOOCSv

Run the sketch
Resize the preview window (it's easier to see if you increase it's size)
Check the console output

This bug has been confirmed on MS Edge (Chromium) and Firefox leading me to believe it's a cross browser problem with p5
Discord chain: https://discordapp.com/channels/836700474425475088/1007853564363817060/1263206263395848282

[bensgilbert]

localhost_5173_projects.-.Profile.1.-.Microsoft.Edge.2024-07-17.19-58-57.mp4

Whilst this was discovered in a Sveltekit project, here is the relevant code used in the video:

	onMount(() => {
		let a;
		(async () => {
			a = new (await import('p5')).default((sketch) => {
				sketch.setup = () => {
					console.log('Creating sketch', sketch.windowWidth, window.innerWidth);
					sketch.createCanvas(sketch.windowWidth, sketch.windowHeight);
				};

				sketch.draw = () => {
					sketch.background('red');
				};
			});
		})();

		return () => {
			console.log('Removing');
			a.remove();
		};
	});

[davepagurek]

I wonder if this is breaking it for multiple p5 instances:

p5.js/src/core/environment.js

Line 678 in 2a86e70

p5.prototype.windowWidth = getWindowWidth();

It looks like the only other time we set windowWidth/windowHeight is on a resize, so if the resize happens between instances existing, maybe it just keeps using the default old values?

If that's the case, it seems like we need to update those values here before calling preload or setup:

p5.js/src/core/main.js

Line 361 in 2a86e70

this._start = () => {