Canvas非零环绕

// 获取画布
var c = document.querySelector('canvas');
// 获取绘图对象
var ctx = c.getContext('2d');

// 逆时针绘制
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(300, 300);
ctx.lineTo(300, 100);
ctx.closePath();

// 顺时针绘制
ctx.moveTo(150, 150);
ctx.lineTo(250, 150);
ctx.lineTo(250, 250);
ctx.lineTo(150, 250);
ctx.closePath();
// 填充颜色
ctx.fillStyle = 'red';
ctx.fill();