# Is multi-canvas production possible? (In Processing p5 Mode)

**URL:** <https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642>\
**Category:** Coding Questions\
**Created:** [April 7, 2023, 10:04am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642 "2023-04-07T10:04:59Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [April 7, 2023, 10:04am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/1 "2023-04-07T10:04:59Z")

</div>

hello. nice to meet you.

Is multi-canvas production possible? (In Processing p5 Mode)

 ![q_1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/7/771bc5ec7fb006d0ce0104f2668417b26ce74662.jpeg)

As you can see from the picture, the position of the canvas is also determined, and the size (size) is determined and placed.

Is it possible to have multiple canvases as above?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [April 7, 2023, 10:46am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/2 "2023-04-07T10:46:06Z")

</div>

Do you mean using p5.js?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 7, 2023, 11:02am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/3 "2023-04-07T11:02:52Z")

</div>

Hi

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

> <https://stackoverflow.com/questions/37240287/can-i-create-multiple-canvas-elements-on-same-page-using-p5js>

> **[Global and instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [April 7, 2023, 11:57am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/4 "2023-04-07T11:57:42Z")

</div>

@jafal@quark

Thank you for your quick reply. thank you.

@jafal  
This is what I want.  
With your help, my curiosity has been solved.  
thank you.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [April 7, 2023, 12:03pm UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/5 "2023-04-07T12:03:22Z")

</div>

@jafal

I have one more question for you.  
By any chance, if you have the time, I’m curious about your thoughts.

![ffig](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/7/2732ec03cefe83facac98a959f4964b435c40cd5.jpeg)  
Layout can be composed through ‘css’ like the picture above.  
However, I am trying to configure via ‘multiple p5’.

By any chance, which part do you think has advantages and disadvantages?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [April 7, 2023, 1:37pm UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/6 "2023-04-07T13:37:51Z")

</div>

> [@GWAK](#):
>
> which part do you think has advantages and disadvantages?

@GWAK hi

Each has its advantages… Your design determines which one is most suitable for your application

Search YouTube for more results

[![](https://img.youtube.com/vi/zGL8q8iQSQw/hqdefault.jpg "8.7: The Basics of CSS - p5.js Tutorial") ](https://www.youtube.com/watch?v=zGL8q8iQSQw)

[![](https://img.youtube.com/vi/sSQPLIHIzmg/hqdefault.jpg "8.10: select() and selectAll() with CSS Selectors - p5.js Tutorial") ](https://www.youtube.com/watch?v=sSQPLIHIzmg)

---

<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, 2023, 2:27pm UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/7 "2023-04-07T14:27:46Z")

</div>

I’m linking a multi-canvas p5js sketch written is CoffeeScript:  
[https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/pages/4p5js.html](https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/pages/4p5js.html)

> [@Converting coding challenge 'Self-avoiding walk backtracing' from p5.js to Processing (Java)](https://discourse.processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047/19):
>
> I’m back w/ another “Self Avoiding Walk II” conversion. This time I’m using the [CoffeeScript](https://coffeescript.org/) language which directly transpiles to JavaScript. Processing 2 used to have a [CoffeeScript Mode](https://github.com/fjenett/coffeescript-mode-processing) a long time ago and I’ve ended up learning it. When I later decided to learn [Python Mode](https://py.processing.org/reference/) to help folks here I’ve relied on my previous [CoffeeScript](https://coffeescript.org/) knowledge b/c they have similar syntax. The old [CoffeeScript Mode](https://github.com/fjenett/coffeescript-mode-processing) relied on the [Pjs](https://gotoloop.github.io/processing-js.github.io/reference/) library in order to run its transpiled sketch on the web. Which by the way is …

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [April 7, 2023, 3:42pm UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/8 "2023-04-07T15:42:56Z")

</div>

@GoToLoop

wow, very nice, interesting.

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [July 27, 2023, 1:24am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/9 "2023-07-27T01:24:05Z")

</div>

@jafal @GoToLoop @quark

Hello. Nice to meet you. How are you all doing?  
It’s not different, but I have a question during the testing process.

```auto
//------------------------------------------------------------------//
let myp5;
var sketch1_en = false;
//------------------------------------------------------------------//

//------------------------------------------------------------------//
function setup() {
  if(sketch1_en==false){    
    myp5 = new p5(s1); sketch1_en = true;
  }   
}
//------------------------------------------------------------------//

//------------------------------------------------------------------//
function draw() {  
  if(sketch1_en){if(millis() > 5*1000){
     sketch1_en = false;
     // myp5.hide();  
     myp5.remove();
  }}    
}
//------------------------------------------------------------------//

//------------------------------------------------------------------//
var s1 = function( sketch ) {
  sketch.setup = function() {
    let canvas1 = sketch.createCanvas(100, 100, sketch.WEBGL);
    canvas1.position(0,0);
  }
  sketch.draw = function() {
    //for canvas 1
    sketch.background(100);
    sketch.rotateX(sketch.frameCount * 0.01);
    sketch.rotateZ(sketch.frameCount * 0.01);
    sketch.cone(30, 50);
  }
};
// new p5(s1);
var s2 = function( sketch ) {
   sketch.setup = function() {
    let canvas2 = sketch.createCanvas(100, 100, sketch.WEBGL);
    canvas2.position(100,0);
  }
  sketch.draw = function() {
    //for canvas 2
    sketch.background(100);
    sketch.rotateX(sketch.frameCount * 0.01);
    sketch.rotateZ(sketch.frameCount * 0.02);
    sketch.cone(30, 50);
  }
};
// new p5(s2);
//------------------------------------------------------------------//

```

‘myp5.remove()’ : execute function  
‘myp5.hide()’ : not executed  
Why? Do you know why?

---

<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:** [July 27, 2023, 1:47am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/10 "2023-07-27T01:47:36Z")

</div>

> [@GWAK](#):
>
> ‘myp5.hide()’ : not executed

Method [**hide()**](https://p5js.org/reference/#/p5.Element/hide) belongs to class [p5.Element](https://p5js.org/reference/#/p5.Element).

But your global variable _myp5_ is of datatype p5, which doesn’t have a method **hide()**.

You can instead try out accessing undocumented property _\_renderer_, which is of datatype [p5.Renderer](https://p5js.org/reference/#/p5.Renderer), to invoke method **hide()**:

`myp5._renderer.hide();`

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [July 27, 2023, 1:58am UTC](https://discourse.processing.org/t/is-multi-canvas-production-possible-in-processing-p5-mode/41642/11 "2023-07-27T01:58:40Z")

</div>

@GoToLoop

Thank you.