thomasballinger/browserCanvasCtxFill.html

## browserCanvasCtxFill.html
<html>
<body>

<canvas id="canvas1" width="200" height="200"></canvas>
<canvas id="canvas2" width="200" height="200"></canvas>
<canvas id="canvas3" width="200" height="200"></canvas>

<script>
var canvases = [canvas1, canvas2, canvas3]
var fillArgs = [undefined, 'evenodd', 'nonzero']

for (var i=0; i<3; i++){
  var canvas = canvases[i];

  var ctx = canvas.getContext('2d');

  ctx.fillStyle = '#000'

  ctx.beginPath();
  ctx.arc(60, 50, 30, 0, 2 * Math.PI);
  ctx.rect(canvas.width, 0, 0-(canvas.width), canvas.height);
  if (fillArgs[i]){
    ctx.fill(fillArgs[i]);
  } else {
    ctx.fill()
  }
}
</script>

<hr>

<p>
Left canvas is <code>ctx.fill()</code>,
middle is <code>ctx.fill('evenodd')</code>,
right is <code>ctx.fill('nonzero')</code>.
</p>

<p>
On Chrome and Firefox all canvases have circles, on Safari only the middle one does.
</p>

<p>
The simplest explanation is that both browsers correctly use 'nonzero' as the default,
but that implementations of it differ.
</p>

<p>
next thing to do: understand the nonzero rule.
</p>
<blockquote>
The value "nonzero" value indicates the non-zero winding rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path going in one direction is equal to the number of times it crosses the path going in the other direction.
</blockquote>
<a href="https://www.w3.org/TR/2dcontext2/#dom-context-2d-fill">spec</a>
</body>
</html>
	<html>
	<body>

	<canvas id="canvas1" width="200" height="200"></canvas>
	<canvas id="canvas2" width="200" height="200"></canvas>
	<canvas id="canvas3" width="200" height="200"></canvas>

	<script>
	var canvases = [canvas1, canvas2, canvas3]
	var fillArgs = [undefined, 'evenodd', 'nonzero']

	for (var i=0; i<3; i++){
	var canvas = canvases[i];

	var ctx = canvas.getContext('2d');

	ctx.fillStyle = '#000'

	ctx.beginPath();
	ctx.arc(60, 50, 30, 0, 2 * Math.PI);
	ctx.rect(canvas.width, 0, 0-(canvas.width), canvas.height);
	if (fillArgs[i]){
	ctx.fill(fillArgs[i]);
	} else {
	ctx.fill()
	}
	}
	</script>

	<hr>

	<p>
	Left canvas is <code>ctx.fill()</code>,
	middle is <code>ctx.fill('evenodd')</code>,
	right is <code>ctx.fill('nonzero')</code>.
	</p>

	<p>
	On Chrome and Firefox all canvases have circles, on Safari only the middle one does.
	</p>

	<p>
	The simplest explanation is that both browsers correctly use 'nonzero' as the default,
	but that implementations of it differ.
	</p>

	<p>
	next thing to do: understand the nonzero rule.
	</p>
	<blockquote>
	The value "nonzero" value indicates the non-zero winding rule, wherein a point is considered to be outside a shape if the number of times a half-infinite straight line drawn from that point crosses the shape's path going in one direction is equal to the number of times it crosses the path going in the other direction.
	</blockquote>
	<a href="https://www.w3.org/TR/2dcontext2/#dom-context-2d-fill">spec</a>
	</body>
	</html>