# How do you combine canvases in p5j weather you overlap or organise them

**URL:** <https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275>\
**Category:** Coding Questions\
**Created:** [April 14, 2019, 7:56pm UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275 "2019-04-14T19:56:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 14, 2019, 7:56pm UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/1 "2019-04-14T19:56:11Z")

</div>

basically here it is the basic form of this thought. im considering instance mode being something, although i don’t get the error message for my first equation; note this for someone who knows nothing, but needs to learn all steps.

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

```

---

<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 14, 2019, 9:31pm UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/2 "2019-04-14T21:31:14Z")

</div>

> [@octaminotin](#):
>
> I’m considering instance mode…

You can also consider using `<iframe>` containers, so you can keep the “global mode” approach: 🖼

[Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe](http://Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe)

> [@How i extends class in p5.js?](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894/13):
>
> This is a Processing concept thingy! Our “Global Mode” approach is strange to JS world! scream Basically, it auto instantiates, then dumps & binds the whole p5 class to the global scope, which allows us to access them all w/o using the dot . operator. clown_face Yup! And that’s the standard way most apps do in the JS world! smirk Correct. However, we still can have multiple p5 “global mode” instances by placing them all inside separate \<iframe\> tags, like I did below: …

---

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 15, 2019, 3:05am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/3 "2019-04-15T03:05:01Z")

</div>

i decided on this

```auto
{dot.operator
function setup1() {
<iframe>
createCanvas(400, 400);
}

function draw() {
background(220);
}

{dot.operator
function setup2() {
<iframe>
createCanvas(400, 400);
}

function draw() {
background(220);
}

```

i still get a error plus i need to seperate the two page ive done it before but dont get it enough

---

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 15, 2019, 3:06am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/5 "2019-04-15T03:06:36Z")

</div>

good one i walked into that

---

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 15, 2019, 3:15am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/6 "2019-04-15T03:15:27Z")

</div>

i got this

```auto
{dot.operator
function setup() {
  createCanvas(400, 500);
}

function draw() {
<iframe1>background(220);
}

{dot.operator
function setup() {
  createCanvas(400, 400);
}

function draw() {
<iframe2>background(320);
  }

```

---

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 15, 2019, 6:39am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/7 "2019-04-15T06:39:49Z")

</div>

there seems to be a error per line is the diction incorrect

---

<div class="post-metadata">

**Author:** ![octaminotin](https://avatars.discourse-cdn.com/v4/letter/o/f475e1/32.png) [@octaminotin](https://discourse.processing.org/u/octaminotin)\
**Post date:** [April 16, 2019, 12:09am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/8 "2019-04-16T00:09:42Z")

</div>

i got this so far

```auto
{dot.operator
function setup1() {
iframe>createCanvas(400, 500);
}

function draw() {
background1(220);
}

{dot.operator
function setup2() {
iframe>createCanvas(400, 400);
}

function draw() {
background2(320);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 16, 2019, 1:02am UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/9 "2019-04-16T01:02:04Z")

</div>

hi,  
-A- is that the same code like  
[How do you combine canvases in p5j weather you overlap or organise them](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/6) ?  
so why you open a new topic?

-B- pls repair / edit your post  
with pasting your code ( after formatting it in ?processing IDE? [ctrl][t] )  
here into

```auto
</> code tag

```

-C-  
can you explain ( as i never see that ? above my level ) what

```auto
{dot.operator

```

is that and where you get it from? and what it is supposed to do  
and ( even if valid )  
why you do not close it with `}`

---

<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 20, 2019, 5:24pm UTC](https://discourse.processing.org/t/how-do-you-combine-canvases-in-p5j-weather-you-overlap-or-organise-them/10275/10 "2019-04-20T17:24:56Z")

</div>

Please don’t put raw `<iframe>` html tags in your code, or in your forum posts. That is HTML, not p5.js / JavaScript. Please don’t do it.

If you must write html tags like `iframe`, write them without \<\>, or write them with a tick ` before and after the word, or write it in code wrapped in three ticks before and after all the lines: ```.