Double line stroke in html5 canvas

Question

I want to draw a shape that has a double line border using html5 canvas path. The default stroke (context.stroke()) has a single line type of path. I can draw a similar shape inside an original shape to generate a figure that looks like a one made with two border lines, but I want some kind of generic solution. Any ideas?

Answer 1

There are several ways to do this. One simple way would be to draw a fat line and "cut out" the middle of it, leaving two smaller strokes.

What you want to do is draw any kind of path - on an in-memory, temporary canvas - and then draw the same path with less thickness and with the globalCompositeOperation set to destination-out on that same canvas.

That will get you the shape you want, essentially 2 lines with transparency between them.

Then you draw that canvas onto the real canvas that has whatever on it (complex background, etc).

Here's an example:

http://jsfiddle.net/uTbsC/