[p5.js 2.0 Bug Report]: createCanvas does not accept canvas argument

[cbednarski]

Most appropriate sub-area of p5.js?

• Core/Environment/Rendering

p5.js version

2.0.2

Web browser and version

LibreFox / Firefox 138.0.4-1

Operating system

Windows

Steps to reproduce this

Hello, I'm new to p5.js. The way createCanvas decides to attach itself to the DOM is inscrutable to me, so I am trying to attach p5.js to an existing canvas element. This works fine in 1.11.7. However, in 2.0.2 it does not work.

It seems that the 4th argument to createCanvas is ignored.

Here is an example of a snippet that works in 1.11.7 but fails in 2.0.2:

Snippet:

<div id="p5container">
	<canvas id="p5canvas"></canvas>
<script>
let canvas = document.querySelector("#p5canvas")
console.log(canvas)

function setup() {
	createCanvas(2000, 600, P2D, canvas);
                                        ^
                                        |
                                     ignored
}
function draw() {
	//when mouse button is pressed, circles turn grey
	if (mouseIsPressed === true) {
	  fill(224);
	} else {
	  fill(255);
	}

	//white circles drawn at mouse position
	circle(mouseX, mouseY, 100);
}
</script>
</div>

Instead of using my existing #p5canvas element, a new #defaultCanvas0 is created in a different place in the DOM, and shows up in the wrong place on the page.

Musings

I compared the functions in the release version of p5.js against the source src/core/rendering.js from the main branch and they are radically different, so perhaps this feature was removed or broken? The source documentation and the beta.p5js.org still reference the fourth argument, though.

Here is the code from main (1.x):

https://github.com/processing/p5.js/blob/v1.11.7/src/core/rendering.js#L119-L146

p5.prototype.createCanvas = function(w, h, renderer, canvas)

And here is the code from the 2.0 branch:

https://github.com/processing/p5.js/blob/v2.0.2/src/core/rendering.js#L119-L155

fn.createCanvas = function (w, h, renderer, ...args)

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

I think this is an unintentional bug coming from the refactor. I'll look into it.

[limzykenneth]

@cbednarski I've just had a look, the feature is actually working but masked in this particular example. What is happening is that it is correctly selecting the canvas element provided and using it. The reason it looks like it is a different one is because of the element id, p5.js set the id of the canvas to defaultCanvas0 overwriting the set p5canvas in HTML, since there can only be one id it cannot preserve both ids. Changing the selector to class with another class name should demonstrate that it is using the provided canvas element as intended.

The HTML id handling probably needs to be updated as there are two problems currently, one is as seen in this issue that it replaces the set id in HTML which it probably shouldn't do; another issue is that it will make all p5.js canvas have the defaultCanvas0 id regardless of how many of them there are while id should be unique.

I'll try to find some time to work on an update for the above but for your issue, it is working as intended but you may want to switch to a class selector if you want consistent access to the element for now.