HTML5 Canvas - Different Strokes

Question

I have to draw a graph with 3 different lines. A line graph.

I tried doing this:

function draw() 
{  
    var canvas = document.getElementById(\"canv         


        

Answer 1

Add a ctx.beginPath() call before every line, and also a ctx.closePath() after every ctx.stroke()

If you don't, every time you call the stroke() method, not only the new line will be drawn but also all the previous lines will be drawn again (with the new strokeStyle), since it's the same line path that is still open.

Answer 2

Although there is a functional answer here, I'd just like to add this.

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

They all refer to the same object. It does not create a new context, it uses the one that's already attached to the canvas element. Delta is totally right in saying that it strokes yellow over the entire path because you did not begin a new path. ctx.beginPath() will solve your troubles.