Drawing lines with different styles

Imagine that we would like to draw them with different styles and colors: the shape on the left will stay as it is now (blue, wireframe), while the shape on the right will be filled, colored in pink. Let's look at how we can do this...

Drawing two paths with different styles: the WRONG and the right way!

First, the wrong way!

In this example, we will draw the two parts of the path with different styles: the first part in wireframe mode, and the second part in filled mode.

What we will try first is to call stroke() after the first half of the path, then call fill() after the second half of the path:

Here is the code:

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

// first part of the path

ctx.moveTo(20,20);

ctx.lineTo(100, 100);

ctx.lineTo(100,0);

// indicate stroke color + draw first part of the path

ctx.strokeStyle = "#0000FF";

ctx.stroke();

// second part of the path

ctx.moveTo(120,20);

ctx.lineTo(200, 100);

ctx.lineTo(200,0);

// indicate stroke color + draw the path

ctx.fillStyle = "pink";

ctx.fill();

Hey - it does not work! Weirdly, the two parts of the path are filled in pink! But we called stroke() after the first half of the path was drawn (lines 5-8). Then we called fill() only after the second part of the path was specified (lines 14-19)... so, what happened?

Remember that fill() or stroke() draws the whole path, even if it is disconnected, and even if it has already been drawn!

What happened is:

1. The call to stroke() has drawn the path corresponding to the lines 5-7. Indeed, the first part of the path (on the left) has actually been drawn once in wireframe mode, and in blue.

2. Then, the call to fill() at line 20 has drawn the whole path again, but in pink and in filled mode. But this time the path corresponds to lines 5-7 plus lines 14-16 that make up the second shape on the right.

So the path that has been drawn this time is made of both of the triangles.

Now, the right way!