How to fill shapes on HTML5 Canvas using EvenOdd winding rule

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. Below is a JSFiddle showing mozFillRule in action. In Firefox, the top two circles should both have a hole in the middle. Click the JavaScript tab to see how this was created.

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.

 

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the  Blog RSS.

The following two tabs change content below.
Leon is a Developer at IDRsolutions, focusing mainly on development of the PDF to HTML5/SVG converter. He was a speaker at JavaOne 2012, co-presenting a session titled 'Lessons Learned in Writing a PDF-to-JavaFX Converter for NetBeans'.

Related Posts:

Leon Atherton

About Leon Atherton

Leon is a Developer at IDRsolutions, focusing mainly on development of the PDF to HTML5/SVG converter. He was a speaker at JavaOne 2012, co-presenting a session titled 'Lessons Learned in Writing a PDF-to-JavaFX Converter for NetBeans'.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>