Can I create multiple canvas elements on one page using p5js

Question

I tried using p5js to draw some points that it works well, but I also need another canvas element that can display live video from the camera. When I added another canvas element, the first canvas becomes empty. At the moment, I tried to use several javascript files to handle different canvases.

camera.js

var capture; function setup() { var video=createCanvas(390, 240); capture = createCapture(VIDEO); capture.size(320, 240); capture.hide(); //set parent to div with id left video.parent("left"); } function draw() { background(255); image(capture, 0, 0, 320, 240); filter('INVERT'); } 

drawshapes.js

 function setup() { // Create the canvas var plot=createCanvas(720, 400); background(200); //set parent to div with id right plot.parent("right"); // Set colors fill(204, 101, 192, 127); stroke(127, 63, 120); // A rectangle rect(40, 120, 120, 40); // An ellipse ellipse(240, 240, 80, 80); // A triangle triangle(300, 100, 320, 100, 310, 80); // A design for a simple flower translate(580, 200); noStroke(); for (var i = 0; i < 10; i ++) { ellipse(0, 30, 20, 80); rotate(PI/5); } } 

index.html

 <div class="container"> <div id="left"></div> <div id="right"></div> </div> 

Answer 1

This is briefly stated in the official p5js link .

Calling createCanvas more than once in a sketch will result in unpredictable behavior. If you want more than one canvas for drawing, you can use createGraphics (hidden by default, but it can be shown).

Decision

This is admittedly not a great solution, but it definitely works.

• Create 1 canvas for both canvases.
• Create 2 non-screen buffers that you can draw.
• In your draw() function, draw anything in every buffer.
• Then copy the contents of both buffers to the main canvas using image() .

Example

 var leftBuffer; var rightBuffer; function setup() { // 800 x 400 (double width to make room for each "sub-canvas") createCanvas(800, 400); // Create both of your off-screen graphics buffers leftBuffer = createGraphics(400, 400); rightBuffer = createGraphics(400, 400); } function draw() { // Draw on your buffers however you like drawLeftBuffer(); drawRightBuffer(); // Paint the off-screen buffers onto the main canvas image(leftBuffer, 0, 0); image(rightBuffer, 400, 0); } function drawLeftBuffer() { leftBuffer.background(0, 0, 0); leftBuffer.fill(255, 255, 255); leftBuffer.textSize(32); leftBuffer.text("This is the left buffer!", 50, 50); } function drawRightBuffer() { rightBuffer.background(255, 100, 255); rightBuffer.fill(0, 0, 0); rightBuffer.textSize(32); rightBuffer.text("This is the right buffer!", 50, 50); } 

Result:

Answer 2

You would like to use instance mode . The first few examples use Global mode , and the next few examples use Instance mode . Instead of using the default canvas, in instance mode you control where p5js places the canvas element. If you have two containers, you should use:

new p5(leftSketch, 'left'); new p5(rightSketch, 'right');

leftSketch and rightSketch will be functions that accept the variable p. This variable is an instance of p5js, and you can control each element of the canvas separately.