title: html5 canvas - how to use 'destination-out' to clear out the most recently drawn shape only?
body: <p>Suppose I have drawn a green rectangle and then a blue rectangle over it. I want to draw a circular hole in the blue rectangle so that the green rectangle underneath is visible through the hole.</p>
  <p><a href="https://i.stack.imgur.com/JOdVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JOdVg.png" alt="enter image description here" /></a></p>
  <p>I have tried using <code>destination-out</code> but it clears all shapes underneath:</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>const ctx = document.querySelector("#canvas").getContext("2d");
  
  ctx.fillStyle = "green";
  ctx.fillRect(0, 0, 50, 100);
  
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 50, 50);
  
  ctx.globalCompositeOperation = "destination-out";
  
  ctx.beginPath();
  ctx.arc(50 / 2 - 10 / 2, 50 / 2, 10, 0, Math.PI * 2);
  ctx.fill();
  
  ctx.globalCompositeOperation = "source-over";</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas
    id="canvas"
    width="500"
    height="200"
    style="background: black"
  &gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>