Question

Is it possible to draw a single filled shape in the canvas with different stroke styles?

In other words, can I draw a blue triangle, and have each side a different color?

I realize there’s a less than optimal solution:

1. being a new path, draw the triangle without strokes, fill it in, then close the path
2. begin a new path, redraw the first side with the first colored stroke, close the path
3. begin a new path, redraw the second side with a different colored stroke, close the path
4. begin a new path, redraw the third side with a different colored stroke, close the path

In short, draw a filled shape without strokes, then redraw each side with a unique stroke style.

This isn’t a big deal for a single triangle, but if you’ve got many, more complex shapes, this seems inefficient.

So – is it possible to draw a single shape with different stroke styles along various segments of the path?

Answer 1

The short answer is no, not in a built-in way anyway. The reason is because with each new call to stroke() it will stroke the entire path, not just the not-yet-stroked parts.

You can always make your own function that, say, takes in a bunch of points or types of segments (you’d have to make your own class) giving each a color, and have that function parse them and do the drawing. But thats as buit-in as you’ll get.

You’ll quickly realize that opens up new and exciting problems, such as what to do about the mitering. And if you don’t know what mitering is, you’ll find out real quick by doing this 🙂

(…and then some of that problem can be alleviated by using ctx.linecap = 'round'