# Place a p5.js canvas inside a div

**URL:** <https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913>\
**Category:** Beginners\
**Created:** [February 18, 2021, 4:59pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913 "2021-02-18T16:59:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![EunieceHarris](https://avatars.discourse-cdn.com/v4/letter/e/53a042/32.png) [@EunieceHarris](https://discourse.processing.org/u/EunieceHarris)\
**Post date:** [February 18, 2021, 4:59pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/1 "2021-02-18T16:59:46Z")

</div>

Hello! I have a diagram that I hope conveys my question:

 ![Screen Shot 2021-02-18 at 11.55.41](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9b1d546cfcf8d148d19313c79250f2c96d039d32.png)

This is a screenshot of my website that I plan on showing multiple p5.js illustrations. I want to place the drawing in the div element but I’ve not been successful so far.

---

<div class="post-metadata">

**Author:** ![EunieceHarris](https://avatars.discourse-cdn.com/v4/letter/e/53a042/32.png) [@EunieceHarris](https://discourse.processing.org/u/EunieceHarris)\
**Post date:** [February 18, 2021, 6:13pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/2 "2021-02-18T18:13:24Z")

</div>

Just as a note, there is an option to add embed an iframe but I am reframing from using them because of how much work the browser has to do to load 50+ illustrations/iframes.

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 18, 2021, 6:59pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/3 "2021-02-18T18:59:01Z")

</div>

HI,  
take a look to the P5.element documentation : [reference | p5.js](https://p5js.org/reference/#/p5.Element)  
You can attach your canvas to a `parent` element. You just need to target your parent element with a `document.getElementById([id])`.

---

<div class="post-metadata">

**Author:** ![EunieceHarris](https://avatars.discourse-cdn.com/v4/letter/e/53a042/32.png) [@EunieceHarris](https://discourse.processing.org/u/EunieceHarris)\
**Post date:** [February 18, 2021, 8:51pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/4 "2021-02-18T20:51:42Z")

</div>

So like this? If so, that didn’t work for me either. Unless I have it wrong which is definitely the case.

 ![Screen Shot 2021-02-18 at 15.54.01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/abbdcfdff5994bc8be78c9e5992bb52917c3da22.jpeg)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 19, 2021, 7:44am UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/5 "2021-02-19T07:44:11Z")

</div>

[p5js.org/reference/#/p5.Element/parent](http://p5js.org/reference/#/p5.Element/parent)

> **[Place Canvas Between 2 Images](http://Bl.ocks.org/GoSubRoutine/56bc62553a754febacfe61e6f9239c69)**
>
> GoSubRoutine’s Block 56bc62553a754febacfe61e6f9239c69

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 19, 2021, 10:09pm UTC](https://discourse.processing.org/t/place-a-p5-js-canvas-inside-a-div/27913/6 "2021-02-19T22:09:59Z")

</div>

If you want to use `select`, you need to specify the CSS type of your target. Here it is a id so `select('#p1');`