p5js multi-instance vertex shape bug

by Paul Wheeler

HTML

<html>
<head>
<script
      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"
      integrity="sha512-cuCpFhuSthtmbmQ5JjvU7msRYynRI67jVHsQhTP8RY+H4BC9qa9kQJeHTomV9/QnOWJbDpLFKdbIHtqTomJJug=="
      crossorigin="anonymous"
    ></script>
</head>
<body>

</body>
</html>

JavaScript

// With just one instance, things work fine
let webgl = false;
// Note: both canvas and webgl renders have issues, but the canvas issues are more significant.
// The canvas renderer won't draw shapes on the second instance at all, and the shapes on the first canvas are incorrect.
// The webgl renderer only has issues when the user inputs points on both instances between pressing enter.
let p1 = new p5(function sketchMaker(sketch){
sketch.setup = function()
{
  sketch.createCanvas(200, 200, webgl ? sketch.WEBGL : undefined);
  if (webgl) {
      sketch.translate(-(sketch.width / 2), -(sketch.height / 2));
  }
  sketch.background(55);
  sketch.fill('red');
  sketch.stroke(10);
  sketch.strokeWeight(3);
  sketch.beginShape();
}
sketch.keyPressed = function ()
{
  console.log('s')
  if(sketch.key == 'Backspace'){
    sketch.background(55);
    sketch.beginShape();
  }
  if(sketch.key == 'Enter'){
    sketch.endShape(sketch.CLOSE);
    sketch.beginShape();
  }

}
sketch.mousePressed = function()
{
  sketch.vertex(sketch.mouseX, sketch.mouseY);
  sketch.point(sketch.mouseX, sketch.mouseY);
}

});

// But if there is a second p5 instance on the page neither one works correctly.
let p2 = new p5(function sketchMaker(sketch){
  sketch.setup = function()
  {
    sketch.createCanvas(200, 200, webgl ? sketch.WEBGL : undefined);
    if (webgl) {
        sketch.translate(-(sketch.width / 2), -(sketch.height / 2));
    }
    sketch.background(100);
    sketch.fill('blue');
    sketch.stroke(10);
    sketch.strokeWeight(3);
    sketch.beginShape();
  }
  sketch.keyPressed = function ()
  {
    console.log('s');
    if(sketch.key == 'Backspace'){
      sketch.background(100);
      sketch.beginShape();
    }
    if(sketch.key == 'Enter'){
      sketch.endShape(sketch.CLOSE);
      sketch.beginShape();
    }
  
  }
  sketch.mousePressed = function()
  {
    sketch.vertex(sketch.mouseX, sketch.mouseY);
    sketch.point(sketch.mouseX, sketch.mouseY);
  }
});