title: HTML 5 Canvas style leaking
body: <p>There is a tiny sample at the URL below that draws two lines.  I expect the top line to be green and the bottom to be blue.  But they are both blue.  Why?</p>
  
  <p><a href="http://jsfiddle.net/rj8Ab/" rel="nofollow">http://jsfiddle.net/rj8Ab/</a></p>
  
  <p><strong>EDIT</strong>  Adding the script below as well:</p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  canvas.width = 500;
  canvas.height = 500;
  
  var ctx = canvas.getContext('2d');
  
  ctx.globalAlpha = 1;
  ctx.globalCompositeOperation = "source-over";
  
  var x1=10, y1=10, width=100, height=100;
  
  ctx.lineWidth = "5";
  
  //draw green line
  ctx.strokeStyle = "#00FF00";
  ctx.moveTo(x1 + 1, y1 + 1);
  ctx.lineTo(x1 + width - 2, y1 + 1);
  ctx.stroke();
  
  //draw blue line
  ctx.strokeStyle = "#0000FF";
  ctx.moveTo(x1 + 1, y1 + 10);
  ctx.lineTo(x1 + width - 2, y1 + 10);
  ctx.stroke();
  </code></pre>