title: Why can't I draw two lines of varying colors in my HTML5 canvas?
body: <p>I am trying to use HTML5 canvas to draw a red line to the left of a green line. Here is my javascript:</p>
  
  <pre><code>var canvas = document.createElement('canvas');
  canvas.height = 150;
  canvas.width = 150;
  var canvasContext = canvas.getContext('2d');
  canvasContext.beginPath();
  
  // Draw the red line.
  canvasContext.strokeStyle = '#f00';
  canvasContext.moveTo(10, 0);
  canvasContext.lineTo(10, 100);
  canvasContext.stroke();
  
  // Draw the green line.
  canvasContext.moveTo(50, 0);
  canvasContext.strokeStyle = '#0f0';
  canvasContext.lineTo(50, 100);
  canvasContext.stroke();
  
  document.body.appendChild(canvas);​
  </code></pre>
  
  <p>However, in Google Chrome, I get a dark green line to the left of a light green line. Why? I called stroke twice right? Hence, why should my first stroke affect my second one?</p>
  
  <p><a href="http://jsfiddle.net/AhdJr/">Here</a> is a JSFiddle that illustrates what I mean.</p>