为什么我不能在HTML5画布中绘制两行不同的颜色？

Question

我正在尝试使用HTML5画布在绿线的左侧画一条红线。以下是我的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);​ 

但是，在谷歌浏览器中，我在浅绿色线条的左边看到一条深绿色的线条。为什么？我打了两次右击脑卒中？因此，为什么我的第一次中风会影响我的第二次？

Here是一个JSFiddle，阐释了我的意思。

Answer 1

当您开始绘制第二条线时，您未拨打canvasContext.beginPath();。

为了使绘图部分更加独立，我加了空格：

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 

var canvasContext = canvas.getContext('2d'); 

// Draw the red line. 
canvasContext.beginPath(); 
canvasContext.strokeStyle = '#f00'; 
canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.stroke(); 

// Draw the green line. 
canvasContext.beginPath(); 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#0f0'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas); 

演示：http://jsfiddle.net/AhdJr/2/

Answer 2

非常有趣的，据我可以告诉WebGL的方式或OpenGL的工作就像一个大型的状态机，这里定义的状态，绘制，更新状态再次战平，等等...

虽然林不知道如果画布遵循相同的原则，即使它只是简单的2D渲染。

我成功地开始了一条新的道路。

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 
var canvasContext = canvas.getContext('2d'); 
canvasContext.beginPath(); 

// Draw the red line. 

canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.strokeStyle = '#FF0000'; 
canvasContext.stroke(); 

canvasContext.beginPath(); // begin new path 
// Draw the green line. 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#00FF00'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas);​ 

我对webgl的经验有限，所以如果我错了请纠正我。