在Chrome中绘制带有小孔的多边形时的伪像

Question

我绘制具有小孔和自相交的多边形，在某些情况下得到artifact。

我试图解决的问题（有效）：
 -增加孔的大小（link）。
 -缩小画布（link）的大小。
 -删除自相交（link）。
 -在Mozilla中运行正常。

所有这些修复程序都不适合我的情况。

Full code

const selfCanvas = document.getElementById('selfIntersect');
selfCanvas.width = 300;
selfCanvas.height = 300;

const dx = 50;
const dy = 100;

const selfCtx = selfCanvas.getContext("2d");

selfCtx.fillStyle = 'red';
selfCtx.strokeStyle = 'rgba(0,0,0,0)';

selfCtx.beginPath();

selfCtx.moveTo(5 + dx, 2 + dy);
selfCtx.lineTo(7 + dx, 0 + dy);
selfCtx.lineTo(3 + dx, 0 + dy);
selfCtx.lineTo(0 + dx, 1 + dy);
selfCtx.lineTo(6 + dx, 0 + dy);
selfCtx.lineTo(5 + dx, 2 + dy);
selfCtx.closePath();

selfCtx.moveTo(0, 0);
selfCtx.lineTo(200, 0);
selfCtx.lineTo(200, 200);
selfCtx.lineTo(0, 200);
selfCtx.lineTo(0, 0);
selfCtx.closePath();



selfCtx.fill();
selfCtx.stroke();

<canvas id="selfIntersect"></canvas>

有什么解决方法吗？