Description
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)