title: html5 canvas stroke as clear line
body: <p>i currently have the following:</p>
  
  <pre><code>  ctx.save();
    ctx.translate(459,258);
    ctx.rotate(sec * Math.PI/36);
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(135,0);
    ctx.lineTo(210,0);
    ctx.strokeStyle = 'rgba(0,153,255)';
    ctx.stroke();
    ctx.restore();
  </code></pre>
  
  <p>drawing a circle of lines (stroke). I want to convert it into a <code>clearRect</code> so that instead of drawing this circle of lines, i want it to erase a circle in the same shape... how can i do this?</p>
  
  <p>i tried doing this but it did not work:</p>
  
  <pre><code>  ctx.save();
    ctx.translate(459,258);
    ctx.rotate(sec * Math.PI/36);
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(135,0);
    ctx.lineTo(210,0);
  
    ctx.clear();
    ctx.restore();
  </code></pre>
  
  <p>thanks.</p>