Using the SVG evenodd fill-rule in the canvas element

Question

Does anyone know if it's possible, either natively or mathematically with JavaScript, to implement the evenodd fill-rule from SVG in the HTML5 canvas element? Links to projects that do this would be helpful.

Answer 1

Yes, it should be possible with globalCompositeOperation. If I'm not mistaken, default "source-over" value should correspond to SVG's "evenodd" (otherwise, try few others one and see if resulting image looks identical).

Answer 2

By mathematically do you mean an algorithm implementation ? It is certainly possible, see http://gpolo.awardspace.info/fill/main.html. It is more a demo than anything, but it solves this issue "mathematically".

Answer 3

That's a really old question, so things must have been different at the time, but since a long time ago, you can pass an fillrule parameter to the fill() method. This fillrule can be either "nonzero", the default, or "evenodd".

var ctx = c.getContext('2d');
drawPath();
ctx.fill();
ctx.translate(70, 0);
drawPath();
ctx.fill('evenodd');
ctx.translate(70, 0);
drawPath();
ctx.stroke();

function drawPath(){
  ctx.beginPath();
  ctx.arc(30,30,20,0,Math.PI*2);
  ctx.lineTo(60,60);
  ctx.lineTo(0,0);
  ctx.closePath();
}

<canvas id="c"></canvas>

Answer 4

I asked myself the same question and came across this Mozilla Bugreport.

Seems as it gets proposed to the WHATWG (canvas specs) by the bugreporters:

Chris Jones, 2011-06-10:

Let's wait for docs until this spec is looking solid on whatwg (I'll post today).