title: using globalCompositeOperation with lines?
body: <p>I'm trying to make a clock with HTML 5's canvas element. </p>
  
  <p>What i'm trying to do is make a line for every second, and then erase the previous line.</p>
  
  <p>I want to erase the previous line with drawing another line using the <code>globalCompositeOperation='xor';</code> but it doesn't work! </p>
  
  <p>Here is the code:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Clock&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body onload="spin()"&gt;
      &lt;canvas id="myCanvas" width="578" height="400"&gt;&lt;/canvas&gt;
      &lt;script&gt;
      var firstTime = 0;
      var prevX=null;
      var prevY=null;
  
      function spin() {
          //get the canvas element
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
  
          //get the right angle for the clock hand
          var date = new Date;
          var seconds = date.getSeconds();
          var a = seconds*6;
          var angleRadian = a*Math.PI/180;
          var angle = 1/2*Math.PI - angleRadian;
  
          if(a &gt; 360)
              a = 0; 
          //Erase the previous line, if it has been drawn.
          if(prevX!=null)
              erasePrevLine(angle, canvas, context);
          //draw line
          drawLine(angle, 100, canvas, context);
          //repeat for the next second
          setTimeout(spin, 500);
      }
      function drawLine(angle, radius, canvas, context)   {
          var centerX = canvas.width/2;
          var centerY = canvas.height/2;
  
          var xTarget = centerX + Math.cos(angle)*radius;
          var yTarget = centerY - Math.sin(angle)*radius;
  
          //save this state to be erased
          prevX = xTarget;
          prevY = yTarget;
  
          //draw
          context.beginPath();
          context.moveTo(centerX,centerY);
          context.lineTo(xTarget, yTarget);
          context.stroke();
      }
      function erasePrevLine(angle, canvas, context)  {
          context.globalCompositeOperation = 'xor';
          var centerX = canvas.width/2;
          var centerY = canvas.height/2;
          prevAngle = angle + (Math.PI/180*6);
          var xTarget = prevX;
          var yTarget = prevY;
  
          //draw on the previous line
          context.beginPath();
          context.moveTo(centerX,centerY);
          context.lineTo(xTarget, yTarget );
          context.stroke();
      }
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>And here is the live example: <a href="http://jsfiddle.net/pyerT/1/" rel="nofollow">http://jsfiddle.net/pyerT/1/</a>
  Anybody knows the answer? it works fine with shapes and texts..</p>