# Nested canvases?

**URL:** <https://discourse.processing.org/t/nested-canvases/20033>\
**Category:** Coding Questions\
**Created:** [April 22, 2020, 1:29pm UTC](https://discourse.processing.org/t/nested-canvases/20033 "2020-04-22T13:29:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yom](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yom](https://discourse.processing.org/u/Yom)\
**Post date:** [April 22, 2020, 1:29pm UTC](https://discourse.processing.org/t/nested-canvases/20033/1 "2020-04-22T13:29:57Z")

</div>

Hello,

I’m new to p5.js, javascript, etc… I would like to have a canvas inside another canvas.

Here is my current code, it works but is it a bad idea ? And if so, why ?

```auto
const sketch1 = p5 => {
  p5.setup = () => {
    const canvas = p5.createCanvas(p5.windowWidth, p5.windowHeight);
    canvas.mouseOver(() => { console.log("mouse entered canvas of sketch 1"); });
    canvas.mouseOut(() => { console.log("mouse left canvas of sketch 1"); });
    p5.background("grey");
    p5.text("sketch1", 10, 20);
  };
};

const sketch2 = p5 => {
  p5.setup = () => {
    const canvas = p5.createCanvas(100, 100);
    canvas.mouseOver(() => { console.log("mouse entered canvas of sketch 2"); });
    canvas.mouseOut(() => { console.log("mouse left canvas of sketch 2"); });
    p5.background("white");
    p5.text("sketch2", 10, 20);
  };
};

const div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "50%";
div.style.top = "50%";
div.style.transform = "translate(-50%, -50%)";
document.getElementsByTagName("body")[0].appendChild(div);

new p5(sketch1);
new p5(sketch2, div);

```

Or can it be improved? I would like to get rid of the **div** if possible, I think it’s an ugly hack, but again, I know nothing…

Or should I really use createGraphics instead ? How to easily replicate the mouse events then ?

Thanks 😉

[EDIT] I’ve just realized that the mouse events can be attached to the element returned by createGraphics as well !

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 22, 2020, 8:52pm UTC](https://discourse.processing.org/t/nested-canvases/20033/2 "2020-04-22T20:52:13Z")

</div>

I don’t think there’s a need to use a nested div. Instead, draw the second canvas/PGraphic onto the main. (Sounds like you already started looking into this 👍)

---

<div class="post-metadata">

**Author:** ![Yom](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yom](https://discourse.processing.org/u/Yom)\
**Post date:** [April 22, 2020, 11:35pm UTC](https://discourse.processing.org/t/nested-canvases/20033/3 "2020-04-22T23:35:51Z")

</div>

But how to draw/add elements inside the main canvas ? For example if I use .draw() to draw the graphics, or when add a checkbox or whatever, all goes below the canvas instead of inside the canvas as expected. I don’t understand… I tried to use .parent(canvas) but it doesn’t seem to change anything. Do I have to use ‘position’ instead, or is there a better solution ?

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 23, 2020, 12:50am UTC](https://discourse.processing.org/t/nested-canvases/20033/4 "2020-04-23T00:50:04Z")

</div>

Could you provide the code that recreates this problem? What also would be helpful is a more detailed description of the desired behavior vs. the current behavior.

---

<div class="post-metadata">

**Author:** ![Yom](https://avatars.discourse-cdn.com/v4/letter/y/c4cdca/32.png) [@Yom](https://discourse.processing.org/u/Yom)\
**Post date:** [April 24, 2020, 12:30pm UTC](https://discourse.processing.org/t/nested-canvases/20033/5 "2020-04-24T12:30:16Z")

</div>

Solved, I was thinking the Canvas was like the main window of a p5.js project, on which every elements (graphics or inputs) would be attached to. I understand now that the canvas is optional and is just like all other elements 🙂

---

<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:** [April 27, 2020, 10:47pm UTC](https://discourse.processing.org/t/nested-canvases/20033/6 "2020-04-27T22:47:29Z")

</div>

> [@Yom](#):
>
> I understand now that the canvas is optional and is just like all other elements

You are recommended to have 0 or 1 canvas within a global sketch or sketch instance. And more graphics buffers (which may be shown) with createGraphics.

> **[reference | p5.js](https://p5js.org/reference/#/p5/createCanvas)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/noCanvas)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[reference | p5.js](https://p5js.org/reference/#/p5/createGraphics)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> This method should be called only once at the start of setup. Calling [createCanvas](https://p5js.org/reference/#/p5/createCanvas) more than once in a sketch will result in very unpredictable behavior. If you want more than one drawing canvas you could use [createGraphics](https://p5js.org/reference/#/p5/createGraphics) (hidden by default but it can be shown).

You can also have multiple instance mode sketches – each with their own canvas.

> **[examples | p5.js](https://p5js.org/examples/instance-mode-instance-container.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[examples | p5.js](https://p5js.org/examples/instance-mode-instantiation.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

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