Canvas绘图挖空效果

开发中遇到一个BUG，绘制的图形中，有些重叠的部分不填充颜色，也就是出现挖空效果，有些又不挖空。
排查过程：
1、在新的页面中，只绘制这里两个图形，稳定复现挖空效果，
2、手动绘制两个矩形却不挖空，用moveTo lineTo 绘制矩形同样不挖空
3、观察两个图形的坐标，发现一个是顺时针一个是逆时针。
4、翻转其中一个图形的坐标数组，再次绘制，挖空效果消失。

结论：Canvas绘图的时候，两个重叠的图形，如果绘制方向不一致，则会出现挖空效果。

问题：如何检测是否是顺时针？
看这里： https://www.cnblogs.com/wangyumin/p/5323518.html
搬运：
判断三点是顺时针还是逆时针方向
设 p1=(x1,y1)， p2=(x2,y2)， p3=(x3,y3)
求向量
p12=(x2-x1,y2-y1)
p23=(x3-x2,y3-y2)
则当 p12 与 p23 的叉乘（向量积）
p12 x p23 = (x2-x1)(y3-y2)-(y2-y1)(x3-x2)
为正时，p1-p2-p3 路径的走向为逆时针，
为负时，p1-p2-p3 走向为顺时针，
为零时，p1-p2-p3 所走的方向不变，亦即三点在一直线上。

代码实现：

function testClockwise (lines) {
    var c = (lines[1].x-lines[0].x)*(lines[2].y-lines[1].y)-(lines[1].y-lines[0].y)*(lines[2].x-lines[1].x);
    return c < 0
}