canvas绘制带孔洞多边形。孔洞面按照顺时针方向绘制不会出现孔洞效果，按照逆时针方向绘制就可以？

顺时针逆时针都想实现绘制带孔的面
我该怎么做呢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="test" width="2000" height="1500" style="position: absolute;cursor: pointer;"></canvas>
<script>

    //二维数组，第一个外围面，第二个带孔面
    //var arr1 = [[[485, 72],[1435, 134],[1483, 948],[433,866]],[[1082, 410],[1132, 506],[987, 516],[982, 405]]];//顺
    //var arr1 = [[[485, 72],[1435, 134],[1483, 948],[433,866]],[[1082, 410],[982, 405],[987, 516],[1132, 506]]];//逆

    //var arr1 = [[[0,0],[800,0],[800,800],[0,800]],[[200,200],[400,200],[400,400],[200,400]]];//顺时针坐标，不可绘制带孔洞面
    var arr1 = [[[0,0],[800,0],[800,800],[0,800]],[[200,200],[200,400],[400,400],[400,200]]];//逆时针坐标，可绘制带孔洞面

    var bg = document.getElementById('test');
    var ctx = bg.getContext('2d');
    ctx.beginPath();
    var i, j, len, len2, point, drawMethod;
    for (i = 0, len = arr1.length; i < len; i++) {
        var obj = arr1[i];
        for (j = 0, len2 = obj.length; j < len2; j++) {
            point = obj[j];
            drawMethod = (j === 0? 'move' : 'line') + 'To';

            ctx[drawMethod](point[0], point[1]);
        }
        ctx.closePath();
        ctx.stroke();
    }
    ctx.save();

    ctx.fillStyle = "#ff00ff";
    ctx.filter = "none";
    ctx.globalAlpha = 0.5;
    ctx.lineDashOffset = 0;
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#00ff48";
    ctx.fill();

    ctx.globalAlpha = 0.5;
    ctx.stroke();
    ctx.restore();

</script>
</body>
</html>

效果截图

img

img

var obj = arr1[i];
改为 let obj = arr1[i]试一下