Make default sketch canvas ID autoincrement

Author: limzykenneth

src/core/main.js

@@ -35,6 +35,7 @@ class p5 {
   // This is a pointer to our global mode p5 instance, if we're in
   // global mode.
   static instance = null;
+  static sketchCount = 0;
   static lifecycleHooks = {
     presetup: [],
     postsetup: [],

src/core/p5.Renderer2D.js

@@ -10,9 +10,7 @@ import FilterRenderer2D from '../image/filterRenderer2D';
 import { Matrix } from '../math/p5.Matrix';
 import { PrimitiveToPath2DConverter } from '../shape/custom_shapes';
 
-
 const styleEmpty = 'rgba(0,0,0,0)';
-// const alphaThreshold = 0.00125; // minimum visible
 
 class Renderer2D extends Renderer {
   constructor(pInst, w, h, isMainCanvas, elt, attributes = {}) {
@@ -29,7 +27,9 @@ class Renderer2D extends Renderer {
       this.canvas.style.display = 'none';
     }
 
-    this.elt.id = 'defaultCanvas0';
+    if(!this.elt.id){
+      this.elt.id = `defaultCanvas${p5.sketchCount++}`;
+    }
     this.elt.classList.add('p5Canvas');
 
     // Extend renderer with methods of p5.Element with getters

src/webgl/p5.RendererGL.js

@@ -136,7 +136,10 @@ class RendererGL extends Renderer {
       // hide if offscreen buffer by default
       this.canvas.style.display = "none";
     }
-    this.elt.id = "defaultCanvas0";
+
+    if(!this.elt.id){
+      this.elt.id = `defaultCanvas${p5.sketchCount++}`;
+    }
     this.elt.classList.add("p5Canvas");
 
     // Set and return p5.Element