Target an existing canvas in the DOM instead of creating a new one

mima · November 9, 2023, 4:48pm

I have an HTML page with a <canvas> node already in it.

I’d like to connect a p5js sketch to it and draw in it.

I’ve seen how to target instance container (examples | p5.js) but in these example a <div> tag is targeted and a new canvas is create it it using p.createCanvas().

Is it possible to target instead an existing canvas in the HTML?

EDIT
I found this page that states:

Optionally, an existing canvas can be passed using a selector, ie. document.getElementById('') . If specified, avoid using setAttributes() afterwards, as this will remove and recreate the existing canvas.

but it doesn’t provide further information. How can I pass the selection?

micuat · November 9, 2023, 6:19pm

I checked the source code and found this

github.com

processing/p5.js/blob/8e97213d0e520c784449b6735394b6186698e58f/src/core/rendering.js#L76


      
          * @param  {Number} w
          * @param  {Number} h
          * @param  {HTMLCanvasElement} [canvas]
          * @return {p5.Renderer} pointer to p5.Renderer holding canvas
          */
          p5.prototype.createCanvas = function(w, h, renderer, canvas) {
           p5._validateParameters('createCanvas', arguments);
           //optional: renderer, otherwise defaults to p2d
          
           let r;
           if (arguments[2] instanceof HTMLCanvasElement) {
             renderer = constants.P2D;
             canvas = arguments[2];
           } else {
             r = renderer || constants.P2D;
           }
          
           let c;
          
           if (canvas) {
             c = document.getElementById(defaultId);

I tried passing canvas as an argument and it seems work:

Topic		Replies	Views
createGraphics referencing existing canvas context Coding Questions	4	1353	June 8, 2022
Use p5 on existing canvas Libraries	4	2454	December 17, 2019
P5 Canvas and HTML Libraries	2	533	April 7, 2021
Use an existing canvas with p5js Libraries	5	988	December 27, 2020
Is there a way to use an external canvas as the canvas p5 uses Coding Questions	4	1075	October 18, 2021

Target an existing canvas in the DOM instead of creating a new one

Related topics