# Use p5 on existing canvas

**URL:** <https://discourse.processing.org/t/use-p5-on-existing-canvas/16307>\
**Category:** Libraries\
**Created:** [December 11, 2019, 12:22am UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307 "2019-12-11T00:22:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 11, 2019, 12:22am UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307/1 "2019-12-11T00:22:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 17, 2019, 6:10am UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307/2 "2019-12-17T06:10:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 17, 2019, 2:37pm UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307/3 "2019-12-17T14:37:43Z")

</div>

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.  
cheers,  
-Matan

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 17, 2019, 8:36pm UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307/4 "2019-12-17T20:36:13Z")

</div>

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:

> <https://github.com/processing/p5.js/issues/1477>
>
> Is that possible to create my canvas area.
> HTML:
> \<canvas id="canvas"\>\</canvas\>
> and then within my setup I could target the created HTML canvas and...

and previously:

- [https://forum.processing.org/two/discussion/20423/sketching-on-an-existing-canvas](https://forum.processing.org/two/discussion/20423/sketching-on-an-existing-canvas)

---

<div class="post-metadata">

**Author:** ![tanzor](https://avatars.discourse-cdn.com/v4/letter/t/7cd45c/32.png) [@tanzor](https://discourse.processing.org/u/tanzor)\
**Post date:** [December 17, 2019, 8:49pm UTC](https://discourse.processing.org/t/use-p5-on-existing-canvas/16307/5 "2019-12-17T20:49:31Z")

</div>

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