Perché non riesco a disegnare due righe di colori diversi nel mio canvas HTML5?

Question

Sto provando a utilizzare la tela HTML5 per tracciare una linea rossa a sinistra di una linea verde. Qui è il mio 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);​ 

Tuttavia, in Google Chrome, ottengo una linea verde scuro a sinistra di una linea verde chiaro. Perché? Ho chiamato ictus due volte giusto? Quindi, perché il mio primo colpo dovrebbe influenzare il mio secondo?

Here è un JSFiddle che illustra cosa intendo.

Answer 1

Non si sta chiamando canvasContext.beginPath(); quando si inizia a disegnare la seconda linea.

Per rendere le sezioni di disegno più indipendente, ho aggiunto spazio bianco:

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

Demo: http://jsfiddle.net/AhdJr/2/

Answer 2

molto interessante per quanto posso dire il modo in cui WebGL e del lavoro OpenGL è come una grande macchina a stati, in cui si definisce uno stato, disegnare, aggiornare lo stato di disegnare di nuovo, e così via ...

Benchè Non sono sicuro che la tela segua gli stessi principi anche se è pensata per semplici rendering 2D.

Sono riuscito a farlo funzionare semplicemente iniziando un nuovo percorso.

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

ho limitato esperienza con WebGL così se Im sbaglio per favore correggetemi.