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

**URL:** <https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179>\
**Category:** Beginners\
**Created:** [November 9, 2023, 4:48pm UTC](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179 "2023-11-09T16:48:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mima](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mima/32/18996_2.png) [@mima](https://discourse.processing.org/u/mima)\
**Post date:** [November 9, 2023, 4:48pm UTC](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179/1 "2023-11-09T16:48:43Z")

</div>

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](https://p5js.org/examples/instance-mode-instance-container.html)) 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](https://p5js.org/reference/#/p5/createCanvas):

> 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?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [November 9, 2023, 6:19pm UTC](https://discourse.processing.org/t/target-an-existing-canvas-in-the-dom-instead-of-creating-a-new-one/43179/2 "2023-11-09T18:19:21Z")

</div>

I checked the source code and found this

> <https://github.com/processing/p5.js/blob/8e97213d0e520c784449b6735394b6186698e58f/src/core/rendering.js#L76>

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

> **[p5.js Web Editor](https://editor.p5js.org/micuat/sketches/AIgS4U4vm)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.