Use p5 on existing canvas

Hey community!
Is there a way to sketch with p5 within an existing javascript canvas? (i.e., one that was not opened using p5)?

1 Like

What are you trying to accomplish? Is the goal to draw some something on the canvas with non-p5, then draw something with p5js on top of it? Like superimposed elements?

1 Like

Hi Jeremy!
Yes, I created a psychological experiment using labjs and wanted to add some p5 features to it. labjs has its own way of creating and interacting with the canvas, so I was wondering if there was a way to ask p5 to draw on an existing canvas, instead of drawing a new canvas on top of it.

1 Like

One option is to create the canvas element in p5.js and then pass it to labjs – assuming labjs allows you to pass in a canvas (I don’t know).

The second option is to create a div, attach the labjs canvas to it, and then attach the p5js canvas to it as well, so that they are layered.

For past discussion, see:

and previously:


Cool. So we I ended up doing the second thing, i.e. created to layered canvases. Thanks!

1 Like