title: p5.js: How to punch a hole into a canvas shape, without changing the background or using an external canvas?
body: <p>I'm trying to figure out a way to punch holes into a thing, but without the hole also going through whatever is in the background already.</p>
  <ol>
  <li>the hole is made of a few arbitrary shapes, and is not a simple path I can use to clip.</li>
  <li>The hole is only punched through the foreground shapes, and not all the way into the background (the background should stay as-is).</li>
  </ol>
  <p>I figured a way to do this with an external context, and then bringing it in.
  My questions: is there a way to do it on my default canvas, and avoid the complications that might arise from the external context (extra memory, color differences etc)?</p>
  <p>Here's a working (p5.js) example, which is using a new context:</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>function setup() {
     createCanvas(600,600);
     background(255, 0, 0);
     noStroke();
  }
  
  function draw() {
    //blue: stuff in the background that should not change
    fill ("blue");
    rect (20,20,500,500);
        
    //draw on external canvas
    pg = createGraphics(600,600);
    //yellow+green foreground shapes
    pg.fill("green");
    pg.rect(100, 100, 200, 200);
    pg.fill("yellow");
    pg.rect(80, 80, 100, 300);
        
    //punch a hole in the shapes
    pg.fill(0, 0, 255);
    pg.blendMode(REMOVE);
    pg.circle(140, 140, 150);
    pg.circle(180, 180, 150);
    //bring in the external canvas with punched shapes
    image(pg, 0, 0);
  
    noLoop();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    padding: 0;
  }
  canvas {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>