title: p5js is adding div each time when click
body: <p>#Hey-PeePs. The issue is happening in p5js:</p>
  <p>I have: 1 function(), 1 draw(), 2 sketches(canvas)</p>
  <p>Using: Instance Mode</p>
  <p>All I want is a gallery! there is an image in thumbnail size, when click goes full-size, which is the reason I have 2 canvases. The following code is working. It  will create a canvas with the thumbnail size of the image and then when I click on it, it will create a DIV which contains the full-screen image.</p>
  <p>The issue is, every time I click on the thumbnail, it will create another DIV and it just goes on. How can I set a condition for this? So it will only draw once!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var PictureThumbnail = function(p) {
    let ThumbImage;
    let fullSize;
    
    p.preload = function() {
      ThumbImage = p.loadImage('https://www.paulwheeler.us/files/Coin120.png');
    };
  
    p.setup = function() {
      var canvas = p.createCanvas(100, 100);
      canvas.parent('#Thumbnail');
  
      fullSize = createDiv('Full Size Image');
      fullSize.addClass('fullSize');
      fullSize.hide();
    };
  
    p.draw = function() {
      p.image(ThumbImage, 0, 0, 700, 70);
      if (mouseIsPressed) {
        if ((p.mouseX &gt; 0) &amp;&amp; (p.mouseX &lt; 100) &amp;&amp; (p.mouseY &gt; 0) &amp;&amp; (p.mouseY &lt; 100)) {
          fullSize.show();
  
          let sketch2 = function(p) {
            p.setup = function() {
              p.createCanvas(500, 500);
              p.background(255);
            }
          };
          new p5(sketch2, window.document.getElementById('fullSize'));
        }
      }
    };
  };
  
  let sketch = new p5(PictureThumbnail);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="Thumbnail"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The last line of code is the issue.</p>
  <p>new p5(sketch2, window.document.getElementById('fullSize'));</p>