[whatwg] Proposal: Add CanvasRenderingContext2D.fillRule with "nonzero" (default) and "evenodd" options

[Chris Jones]

In 2D canvas, determining whether a point is "inside" a path is currently always done using the non-zero winding rule.  I propose extending 2D canvas to allow determining inside-ness using the even-odd rule.  The motivation is

 (1) Many/most 2D graphics libraries have this feature; canvas should have it for completeness.  Some other languages/libraries that support even-odd fill (in alphabetical order): cairo, Direct2D, GDI, PDF, PostScript, Quartz, skia, and SVG.

 (2) While the nonzero-winding and even-odd rules are equivalent in the sense that there's nothing that can be drawn with one that can't be drawn with the other, some figures are simpler to draw with one rule instead of the other.  We should add even-odd fill for author convenience.

 (3) Using one rule over the other may result in better performance, by decomposing to less geometry.

The concrete proposal is

  interface CanvasRenderingContext2D {
    //...
    attribute fillRule;  // "nonzero", "evenodd" (default "nonzero")
    //...
  };

The names "nonzero" and "evenodd" were chosen to match the SVG specification [1].  The SVG specification can be used as a reference for the semantics of even-odd fill.

|fillRule| applies to all operations currently "hard-coded" to use the nonzero-winding rule to determine inside-ness.  The change proposed here is, when computing inside-ness, use the rule currently specified by |fillRule|.

The default value of |fillRule| is "nonzero", for backwards compatibility.  The |fillRule| attribute is part of the canvas state saved by save() and restored by restore().  Script attempting to set |fillRule| to a string not one of "nonzero" or "evenodd", say "garbage", would have no effect (i.e. *not* change the value of |fillRule|).

Mozilla has implemented this proposed spec as |mozFillRule| [2].  It will be available in Firefox "Nightly" builds starting June 11th.

Cheers,
Chris

[1] http://www.w3.org/TR/SVG/painting.html#FillProperties
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=655926