# Sketch in a \<div\>

**URL:** <https://discourse.processing.org/t/sketch-in-a-div/36189>\
**Category:** Coding Questions\
**Created:** [April 7, 2022, 12:32pm UTC](https://discourse.processing.org/t/sketch-in-a-div/36189 "2022-04-07T12:32:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![CheeseBread](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@CheeseBread](https://discourse.processing.org/u/CheeseBread)\
**Post date:** [April 7, 2022, 12:32pm UTC](https://discourse.processing.org/t/sketch-in-a-div/36189/1 "2022-04-07T12:32:25Z")

</div>

hello,  
I need to put my sketch (voxel\_view\_canvas3.js) in a div (id=“canvas\_voxel\_colors”) where is write CANVAS, but the sketch doesn’t show. What am I doing wrong?

link to the project ([p5.js Web Editor](https://editor.p5js.org/ChesseBread/sketches/q_qzmXZao))

---

<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:** [April 7, 2022, 6:22pm UTC](https://discourse.processing.org/t/sketch-in-a-div/36189/2 "2022-04-07T18:22:51Z")

</div>

> [@CheeseBread](#):
>
> I need to put my sketch (voxel\_view\_canvas3.js) in a `<div id=canvas_voxel_colors>`…

For that you simply invoke method [p5.Element](https://p5js.org/reference/#/p5.Element)::[**parent()**](https://p5js.org/reference/#/p5.Element/parent) over the [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object returned by [p5](https://p5js.org/reference/#/p5)::[**createCanvas()**](https://p5js.org/reference/#/p5/createCanvas): 💡

```auto
  sketch.setup = function() {
    sketch.createCanvas(200, 200).parent('canvas_voxel_colors'); 

```

Alternatively you can instead pass the _id_ attribute to the [p5](https://p5js.org/reference/#/p5/p5)’s constructor as its 2nd argument: 🕶

```auto
var myp5_3 = new p5(s3, 'canvas_voxel_colors');

```

However you’ve got much more bugs than that: 🪲

- Your `<script>` tags are incompatible w/ the p5.js Web Editor, b/c they attempt to load libraries as if they were local instead of using some CDN remote link.
- Also the current order they’re being loaded is prone to cause a script to fail when it’s attempting to access variables from other scripts which haven’t been fully loaded yet.
- Your main script “voxel\_view\_canvas3.js” is using p5js instance mode style; which is OK.
- However your class Voxel\_representation inside script “classes\_obj.js” is expecting p5js to be in global mode, b/c it attempts to access p5js API directly w/o a [p5](https://p5js.org/reference/#/p5/p5) reference!

---

<div class="post-metadata">

**Author:** ![CheeseBread](https://avatars.discourse-cdn.com/v4/letter/c/7cd45c/32.png) [@CheeseBread](https://discourse.processing.org/u/CheeseBread)\
**Post date:** [April 8, 2022, 12:31pm UTC](https://discourse.processing.org/t/sketch-in-a-div/36189/3 "2022-04-08T12:31:52Z")

</div>

thank you so much, I fixed the problem with the canvas position and the class. now it’s working properly.