I am trying to use HTML5 canvas to draw a red line to the left of a green line. Here is my javascript:

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);​

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?

Here is a JSFiddle that illustrates what I mean.