Cutting out a fat stroke

Question

I want to draw this: Two lines following a along a beizer path with equal distance. The fat lines are what I want, the small dotted one is the guiding path.

The image above is done by first stroking the path with width 30, and then with width 25 in the same color as the background. This works OK sometimes, but not if the background isn't plain colored.

I want something like 'clip' with a shape. And I would prefer to do it using standard graphic libraries. Even better the tools that come in most 2d graphics canvases.

Notes:

• I'm using HTML canvas, but I don't think that's important to the problem.
• I can translate the path up and down, but that won't give me the same distance to the center everywhere.
• Maybe it could be done with a gradient stroke, but I'm not sure how those work.

Answer 1

I can think of a way to do this in HTML5 Canvas.

What you want to do is draw a curve - on an in-memory, temporary canvas - and then draw the same curve 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/at3zR/