Canvas HTML5: diferentes trazos

Question

Tengo que dibujar un gráfico con 3 líneas diferentes. Un gráfico de líneas

He intentado hacer esto:

function draw() 
{ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d");  
    ctx.lineWidth=10; 

    ctx.strokeStyle="teal"; 
    ctx.moveTo(10,CompanyA[0]); 
    ctx.lineTo(110,CompanyA[1]); 
    ctx.lineTo(210,CompanyA[2]); 
    ctx.stroke(); 


    ctx.strokeStyle="green"; 
    ctx.moveTo(10,CompanyB[0]); 
    ctx.lineTo(110,CompanyB[1]); 
    ctx.lineTo(210,CompanyB[2]); 
    ctx.stroke();  

    ctx.strokeStyle="yellow"; 
    ctx.moveTo(10,CompanyC[0]); 
    ctx.lineTo(110,CompanyC[1]); 
    ctx.lineTo(210,CompanyC[2]); 
    ctx.stroke(); 
} 

Pero, al parecer, la última carrera de atracciones para todas las líneas. Entonces obtengo 3 líneas amarillas, en lugar de una verde azulada, una verde y una amarilla. Intenté crear tres contextos diferentes (ctx1, ctx2 y ctx3), pero por alguna razón, todos fueron dibujados con la llamada "ctx3.stroke()".

¿Cuál sería la forma correcta de hacerlo?

Answer 1

añadir una llamada ctx.beginPath() antes de cada línea, y también un ctx.closePath() después de cada ctx.stroke()

Si no, cada vez que se llama al método stroke(), no sólo se dibujará la nueva línea, sino también todos los anteriores las líneas se dibujarán nuevamente (con el nuevo strokeStyle), ya que es la misma línea que todavía está abierta.

Answer 2

Aunque aquí hay una respuesta funcional, me gustaría agregar esto.

var ctx1 = canvas.getContext("2d"); 
var ctx2 = canvas.getContext("2d"); 
var ctx3 = canvas.getContext("2d"); 

Todos se refieren al mismo objeto. No crea un nuevo contexto, usa el que ya está unido al elemento canvas. Delta tiene toda la razón al decir que pasa amarillo en toda la ruta porque no comenzaste una nueva ruta. ctx.beginPath() resolverá sus problemas.