Search code examples
javascriptcanvasinternet-explorer-8vmlexcanvas

VML non-zero winding

I am trying to draw complex polygons with HTML canvas. I have to decide on either "even-odd" or "non-zero" winding rule. Browsers apply non-zero winding rule by default. In IE11+ and other major browsers winding rule can be changed to even-odd.

I want this to be consistent also on older browsers (Supporting IE8+). Now since there doesn't seem to be a way to change the winding rule in IE9 and IE10, I am asking if there is a way to change winding for IE8.

I am using excanvas.js for IE8. Excanvas.js uses VML shapes to simulate shapes on canvas and applies even-odd rule by default. Is there a way to change the winding for VML shapes to non-zero rule?

A fiddle to play with.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(111, 108), context.lineTo(112, 141), context.lineTo(155, 143), context.lineTo(140, 171), context.lineTo(113, 170), context.lineTo(92, 168), context.lineTo(80, 142), context.lineTo(79, 117), context.lineTo(82, 86), context.lineTo(103, 75), context.lineTo(131, 67), context.lineTo(179, 67), context.lineTo(177, 55), context.lineTo(122, 39), context.lineTo(93, 45), context.lineTo(60, 57), context.lineTo(41, 79), context.lineTo(36, 108), context.lineTo(43, 149), context.lineTo(65, 187), context.lineTo(104, 203), context.lineTo(146, 206), context.lineTo(173, 190), context.lineTo(187, 160), context.lineTo(195, 115), context.lineTo(152, 110)

context.closePath();

context.moveTo(44, 50), context.lineTo(90, 66), context.lineTo(61, 27)
context.closePath();

// Use either nonzero or evenodd
//context.fill("nonzero");
//context.fill("evenodd");
context.fill();
<canvas width="250" height="250" id="canvas"></canvas>

Even-odd / Non-zero

EvenOdd enter image description here

Solution

  • I am asking if there is a way to change winding [fill rule] for IE8?

    The VML standard does not allow for defining fill-rules so even-odd is the only option.

    You may get around some of the problems by rendering each sub-path separately. This of course may introduce other problems in the other end when the path depends on them for final result.