# Instance mode creating two canvas

**URL:** <https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121>\
**Category:** Coding Questions\
**Created:** [September 22, 2019, 9:51pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121 "2019-09-22T21:51:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![marlus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/marlus/32/1558_2.png) [@marlus](https://discourse.processing.org/u/marlus)\
**Post date:** [September 22, 2019, 9:51pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/1 "2019-09-22T21:51:02Z")

</div>

Hello there,

I’m trying to use p5js instance mode, but I don’t know why, invoking `new p5(sketch)` create two canvases…

```auto
const p5 = require('p5')

global.p5 = p5

const sketch = () => {

    setup = () => {
        
        createCanvas(windowWidth, windowHeight)
        background(0)

    }

    draw = () => {

        background(0)
        ellipse(mouseX, mouseY, 10, 10)

    }

    windowResized = () => {
        
        resizeCanvas(windowWidth, windowHeight);

    }

}

new p5(sketch)

```

I’ve also tried :

```auto
new p5(sketch)
new p5(sketch, 'p5sketch')
new p5(sketch,document.getElementById('p5sketch')) 

```

They all create two canvas, the right one and one smaller:

```auto
<canvas id="defaultCanvas0" class="p5Canvas" style="width: 852px; height: 717px;" width="1704" height="1434"></canvas>
<canvas id="defaultCanvas1" class="p5Canvas" style="width: 100px; height: 100px;" width="200" height="200"></canvas></body>

```

---

<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:** [September 24, 2019, 7:11pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/2 "2019-09-24T19:11:59Z")

</div>

Did you try the example form from the instance mode documentation? (untested)

- [https://github.com/processing/p5.js/wiki/Global-and-instance-mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)

```auto
const s = ( sketch ) => {
  // ...
};

let myp5 = new p5(s);

```

---

<div class="post-metadata">

**Author:** ![marlus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/marlus/32/1558_2.png) [@marlus](https://discourse.processing.org/u/marlus)\
**Post date:** [October 6, 2019, 12:11am UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/3 "2019-10-06T00:11:57Z")

</div>

Hello, Jeremy  
Also tested the code you sent, but same thing happens… a second blank canvas is added to

---

<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:** [October 6, 2019, 4:09am UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/4 "2019-10-06T04:09:38Z")

</div>

Here is an example of using instance mode to drop one sketch and replace it with a second sketch – at the same canvas attachment point on the page. Click the mouse to switch back and forth between the two sketches.

[https://editor.p5js.org/jeremydouglass/sketches/0bn7mGGQo](https://editor.p5js.org/jeremydouglass/sketches/0bn7mGGQo)

---

<div class="post-metadata">

**Author:** ![marlus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/marlus/32/1558_2.png) [@marlus](https://discourse.processing.org/u/marlus)\
**Post date:** [October 6, 2019, 8:58pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/5 "2019-10-06T20:58:04Z")

</div>

Thank you, Jeremy!

Is there a way to use instance mode without having to scope everything with `p.`?

---

<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:** [October 6, 2019, 9:06pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/6 "2019-10-06T21:06:09Z")

</div>

I am not a JavaScript expert, but as far as I know p5.js instance mode and scoping are synonymous – the reason it works is that your sketches are not defined in global scope, but instead in a defined scope.

Perhaps a person with a bit more p5.js experience like @GoToLoop could comment.

---

<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:** [October 6, 2019, 10:30pm UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/7 "2019-10-06T22:30:08Z")

</div>

You could simply use global mode! 🌐

If you need to have more than 1 sketch in the same page you can place the others within their own `<iframe>`. 💡

[Bl.ocks.org/GoSubRoutine/raw/60b154e52336f7fee7c5f1fe817ceb22/](http://Bl.ocks.org/GoSubRoutine/raw/60b154e52336f7fee7c5f1fe817ceb22/)

> <https://gist.github.com/GoSubRoutine/60b154e52336f7fee7c5f1fe817ceb22>
>
> There are more than three files. show original

---

<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:** [October 7, 2019, 12:08am UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/8 "2019-10-07T00:08:00Z")

</div>

Very interesting. So an a global mode design, rather than having different setup/draw, a single sketch can re-invoke its own … what, its own setup / createCanvas, or its own custom reset() ? – creating a new canvas, or new canvas contents with different parameters?

Regarding this:

```auto
function setup() {
  createCanvas(600, 600).mousePressed(reset);

```

Coming from primarily Java / Python etc, I would expect clicking the mouse during `draw()` to do nothing, yet it does – so the method chaining in setup() must be configuring something that I don’t quite understand. I’m assuming the mouse calls reset() rather than calling setup()…

---

<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:** [October 7, 2019, 8:37am UTC](https://discourse.processing.org/t/instance-mode-creating-two-canvas/14121/9 "2019-10-07T08:37:09Z")

</div>

> [@jeremydouglass](#):
>
> I’m assuming the mouse calls **reset()** rather than calling **setup()**…

Like all Processing flavors, **setup()** should be called once only.  
Indeed, the `<canvas>`’ _mousedown_ event is set to callback **reset()**:

> **[Element: mousedown event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event)**
>
> The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.

> [@jeremydouglass](#):
>
> – so the method chaining in **setup()** must be configuring something that I don’t quite understand.

Let’s dissect `createCanvas(600, 600).mousePressed(reset);` chaining call, shall we?

Method p5::**createCanvas()** returns a p5.Renderer object:

> **[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.Renderer)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

And b/c it’s the default P2D default renderer, it is more precisely a p5.Renderer2D object:

> <https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer2D.js>

The class p5.Renderer is also a subclass of the base class p5.Element:

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

> <https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer.js>

Therefore, all p5.Element’s methods & properties are available to a p5.Renderer instance; including of course p5.Element::**mousePressed()**:

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

The main diff. between p5.Element::**mousePressed()** & p5::**mousePressed()** methods:

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

is that the former acts upon its p5.Element only; while the later fires anywhere within the _document_ where the sketch is being run:

> **[Document - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document)**
>
> The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.