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

This site is best viewed in a modern browser with JavaScript enabled.

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.