¿Por qué no puedo dibujar dos líneas de diferentes colores en mi lienzo HTML5?

Question

Estoy tratando de usar un lienzo HTML5 para dibujar una línea roja a la izquierda de una línea verde. Aquí está mi 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);​ 

Sin embargo, en Google Chrome, me sale una línea de color verde oscuro a la izquierda de una línea de color verde claro. ¿Por qué? Llamé golpe dos veces ¿verdad? Por lo tanto, ¿por qué mi primer golpe debería afectar mi segundo golpe?

Here es un JSFiddle que ilustra a qué me refiero.

Answer 1

No está llamando al canvasContext.beginPath(); cuando comienza a dibujar su segunda línea.

Para que las secciones de dibujo más independiente, he añadido un espacio en blanco:

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

Demostración: http://jsfiddle.net/AhdJr/2/

Answer 2

muy interesante por lo que yo puedo decir el camino webgl o el trabajo OpenGL es como una máquina de estado grande, donde se define un estado, dibujar, actualizar el estado de dibujar de nuevo, y así sucesivamente ...

Aunque No estoy seguro de si el lienzo sigue los mismos principios, aunque solo sea para representaciones simples de 2d.

Me las arreglé para trabajar simplemente comenzando una nueva ruta.

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

Tengo experiencia limitada con webgl así que si me equivoco, por favor corrígeme.