Search code examples
htmlcanvasopacityfillstroke

Transparency of a filled stroke in HTML5

I'm working on a doodling app in HTML5 and I would like to do a sort of bucket feature. The idea is to draw a path and it will be closed and filled with the selected colour (colour of the stroke). It works quite well with solid colours, but if I want to have a transparent stroke and fill, I run into this problem:

What happens is the fill is done until the middle of the stroke (the actual sampling point of the path) so there's a line of half the size of the stroke inside the shape which is darker because it's the intersection of the fill and the stroke.

You should be able to see what I'm talking about live in this sandbox.

Solution

  • Simon's answer was correct at the time but it now seems that Chrome 36 has corrected a bug which affects his solution and it no longer works. It already didn't work on Firefox and it seems to be the expected behaviour: https://bugzilla.mozilla.org/show_bug.cgi?id=898375

    So, how do you get this done?
    You first need another canvas.
    Draw your filled and stroked shape on this canvas without opacity (not in the colour and no globalAlpha).
    Now, draw set the globalAlpha to whatever you want on your main canvas.
    Draw the first canvas on your main one.
    Set the globalAlpha to whatever you had on your main canvas.
    Done.