title: Javascript HTML5 Canvas drawing transparent circles
body: <p>I need to have a function to draw several circles on canvas starting with mousedown at center=x,y and dragging mouse to deltaX,deltaY thus creating radius r, for each circle. The circles cannot have a fill (need them transparent) so the user can see clearly where the circles intercept. My current code draws circles WHILE the mouse is dragged, and that's expected, but it also LEAVES those extra circles behind. I need to leave only the circle on mouseup. Any help is appreciated. Thank you :).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body style="margin:0"&gt;
  &lt;canvas id="canvas" width="500" height="500" style="border:1px solid"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  
  var canvas=document.getElementById('canvas');
  var context=canvas.getContext('2d');
  var radius=50;
  var nStartX = 0;
  var nStartY = 0;
  var bIsDrawing = false;
  var putPoint = function(e){
    nStartX = e.clientX;nStartY = e.clientY;
    bIsDrawing = true;
    radius = 0;
  }
  var drawPoint = function(e){
    if(!bIsDrawing)
      return;
    
    var nDeltaX = nStartX - e.clientX;
    var nDeltaY = nStartY - e.clientY;
    radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
    context.beginPath();
    context.arc(nStartX, nStartY, radius, 0, Math.PI*2);
    context.strokeStyle="#000000";
    //context.fillStyle="#FFFFFF";
    context.fillStyle = 'rgba(0, 0, 0, 0)';
    context.stroke();
    context.fill();
  }
  var stopPoint = function(e){
    //context.clip();
    //context.clearRect(0, 0, canvas.width, canvas.height);
    bIsDrawing = false;
  }
  canvas.addEventListener('mousedown',putPoint);
  canvas.addEventListener('mousemove',drawPoint);
  canvas.addEventListener('mouseup',stopPoint);
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>