Can I create multiple canvas elements on same page using p5js : <p>I tried using p5js to draw some points it does work well but I also wanted another canvas element which can show the live video from camera. When I added another canvas element the first canvas goes blank. For now I tried using multiple javascript files to process different canvas.</p>

<p>camera.js</p>

<pre><code>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');
}
</code></pre>

<p>drawshapes.js</p>

<pre><code>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 &lt; 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}
</code></pre>

<p>index.html</p>

<pre><code>&lt;div class="container"&gt;
  &lt;div id="left"&gt;&lt;/div&gt;
  &lt;div id="right"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
