How to fill shapes on HTML5 Canvas using EvenOdd winding rule with SVG

A little over a year ago, I wrote a short series of articles that talked about Canvas’ inability to fill shapes using the even-odd winding rule. Well, a lot has changed since then, so I wanted to revisit this series to give an update and talk about the current state of affairs.

If you’re wondering what a winding rule is or what even-odd means, click here to read the first article in the series where I explain what it all means and why it matters.

At the time, only Firefox had implemented the ability to fill using the even-odd rule via a prefixed attribute ctx.mozFillRule = ‘evenodd’;, but this was not much use if your users are not using Firefox. The following shows mozFillRule in action. In Firefox, the top two circles should both have a hole in the middle.

In the second article in the series, I concluded that the only way you could ensure that it would be displayed correctly is to have raster versions of the shapes which get drawn using the drawImage() command. Of course, you could draw SVG versions instead. The downside to this method is that it requires extra assets to be loaded, making your page slower to load.

In January of 2013, Rik Cabanier posted an article on the Adobe blog announcing that the implementation details had been figured out, and that support for both winding rules was in nightly builds of Firefox, WebKit and Chromium. Excellent news!

To use this functionality, it is now possible to use an optional parameter on the canvas fill command to specify which winding rule to use. An example of it in action is below.

But as with most web features, support for this is not yet in all browsers. You will find this working in current releases of Chrome and Firefox, but not in Opera, Safari, or any versions of Internet Explorer. Mobile browsers are a similar story – both mobile Chrome and Firefox have support, but not Safari or Opera. It is working in the developer build of Opera, so support will be coming soon to Opera users.

So although there is now a spec defined and an extra browser with support, unfortunately the situation is still similar to before – currently the only way to guarantee that users see exactly what you want them to see is to use SVG or to rasterize even-odd filled shapes ahead of time and provide images instead.