title: How do you draw with alpha = 0 in an html5 canvas to 'erase'
body: <p>How do you draw with <code>alpha = 0</code> to an HTML5 Canvas? Imagine I'm making a photoshop clone, I have a layer that's solid red. I pick the eraser tool and draw with. It draws in <code>rgba(0,0,0,0)</code> letting me see through to the background. How do I do this in HTML5 Canvas?</p>
  
  <p>Here's some code.</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 rand = function(v) {
      return Math.random() * v;
  };
  
  var canvas = document.getElementsByTagName("canvas")[0];
  var ctx = canvas.getContext("2d");
  
  // fill the canvas with black
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Erase some circles (draw them in 0,0,0,0);
  ctx.fillStyle = "rgba(0,0,0,0)";
  ctx.globalCompositeOperation = "copy";
  for (var ii = 0; ii &lt; 5; ++ii) {
      ctx.beginPath();
      ctx.arc(rand(canvas.width), rand(canvas.height), 
              rand(50) + 20, 0, 360, false);
      ctx.fill();
  }
  
  /*
  source-over    
  source-in    
  source-out    
  source-atop
  
  destination-over    
  destination-in    
  destination-out    
  destination-atop
  
  lighter    
  darker    
  copy    
  xor
  */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
      margin: 10px;
      border: 1px solid black;
      background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Want red with yellow circles&lt;/div&gt;
  &lt;canvas&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This doesn't work. All canvas operations are considered to be infinitely large which means drawing each circle (arc) with <code>globalCompositeOperation</code> set to "copy" effectively erases everything outside of each circle.</p>
  
  <p>I might be able to setup clipping to match the circle but ideally I'd like to be able to erase with an anti-aliased circle, same as a photoshop brush.</p>