我想知道为什么下面会产生一个正方形相互重叠的白色区域：
// square 1
ctx.moveTo( 0, 0); // left top
ctx.lineTo(200, 0); // right top
ctx.lineTo(200, 200); // right bottom
ctx.lineTo( 0, 200); // left bottom
ctx.lineTo( 0, 0); // left top
// square 2
ctx.moveTo(100, 100); // left top
ctx.lineTo(100, 300); // left bottom
ctx.lineTo(300, 300); // right bottom
ctx.lineTo(300, 100); // right top
ctx.lineTo(100, 100); // left top
ctx.fill();
因此，第一个正方形是用顺时针方向定义的路径绘制的，而第二个正方形则是用逆时针方向定义。
我希望两者都是黑色的，就像我们用相同的方式定义平方2的顺序一样：http://jsfiddle.net/yNTTj/6/。然而，令人着迷的是，重叠的空间变成了白色（一般来说，是背景色）。
如果我用另一种方式定义一条路径，它基本上与它所截断的区域相同，那么为什么在填充时会产生不同的结果呢？