6

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?

Dangila
  • 1,434
  • 3
  • 14
  • 25

1 Answers1

10

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/

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • 1
    Great idea! I wanted to suggest drawing once and resizing a bit, but that would add blur. Your solution makes crisp lines. I guess there's no better way. – naugtur Nov 18 '12 at 22:24