change colour problem; trivial, I'm sure - but I can't figure it out

[rippon]

I simply want to draw two line segments, the first in blue, the second in red:

function testDraw(){
	context.moveTo(0,0); context.lineTo(myCanvasWidth/2, myCanvasHeight/2);
	context.strokeStyle = "blue";
	context.stroke();
	context.lineTo(myCanvasWidth, 0);
	context.strokeStyle = "red";
	context.stroke();
}

The problem is that the first blue line segment is gone over again - in red.

I'm a javascript beginner, and I'm sure this is trivial, but I'd appreciate help nevertheless.
Thanks.

[ReFreezed]

You have to call context.closePath() when you've ended your blue line, and then call context.beginPath() and context.moveTo() again to start your new red line.

As it is now your red line uses all coordinates from the blue line as well those added after your first stroke(), so it draws the red line above the blue line.

context.beginPath();
context.moveTo(0,0);
context.lineTo(myCanvasWidth/2, myCanvasHeight/2);
context.closePath();
context.strokeStyle = "blue";
context.stroke();

context.beginPath();
context.moveTo(myCanvasWidth/2, myCanvasHeight/2);
context.lineTo(myCanvasWidth, 0);
context.closePath();
context.strokeStyle = "red";
context.stroke();

[rippon]

Thanks.
However, I need a way to 'endPath' rather than 'closePath'. The problem with 'closePath()' is that it will create a triangle if I plot three points. How can join three points in one colour, and then join a succession of other points in another colour, without the first three points being made into a closed triangle through the use of 'closePath()'?

[ReFreezed]

Oh sorry, my bad. You just need to include the beginPath call to start a new line with a new color. It'll end the old path without "closing" it.

context.beginPath();
context.moveTo(0,0);
context.lineTo(myCanvasWidth*0.25, myCanvasHeight*0.5);
context.lineTo(myCanvasWidth*0.5, myCanvasHeight*0.25);
context.strokeStyle = "blue";
context.stroke();

context.beginPath();
context.moveTo(myCanvasWidth*0.5, myCanvasHeight*0.25);
context.lineTo(myCanvasWidth*0.75, myCanvasHeight*0.5);
context.lineTo(myCanvasWidth, 0);
context.strokeStyle = "red";
context.stroke();

[rippon]

Thank you!

That's exactly what I need.