title: HTML5 Canvas erasing a drawn object?
body: <p>I'm having trouble implementing an "erase" feature for the objects I draw. I draw objects like so:</p>
  
  <pre><code>function draw_obj1(context) {
      context.lineTo(...)
      context.arc(...)
      //etc
  }
  </code></pre>
  
  <p>And these are drawn overtop of an image background I have for the canvas (via context.createPattern, fillStyle = pattern, etc). </p>
  
  <p>So say the above function traces out a triangle using various lineTo calls. Now to "erase", or "undo" this drawing, one plan I had was to re-draw the 'xor' version of the same object on top of it, to undo it. I do this via context.globalCompositeOperation (see: <a href="https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html" rel="nofollow">https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html</a>). </p>
  
  <p>This almost works, except the final result comes up not completely blank against my light-blue background. It comes out as a light-greyish triangle, versus the original black-lined triangle. </p>
  
  <p>EDIT - forgot to mention another idea I tried. Doing 'clearRect' on the area I need gone makes a white hole in my light-blue background which is no good.</p>
  
  <p>So how should I go about undoing lines/arcs that I've drawn? </p>
  
  <p>Cheers</p>