Javascript 如何清除画布元素中的多边形区域？

我使用了clearRect函数，但没有看到多边形的等效函数。我天真地尝试：

ctx.fillStyle = 'transparent';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

但这只是绘制了一个透明区域，对已经存在的区域没有影响。有没有办法清除画布元素内部的多边形区域？

您可以将操作设置为“destination-out”来执行以下操作：

ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

例如：

---

试穿一下

谢谢乔纳斯！self注意：要想让它按预期工作，你需要一个不透明的填充颜色（没有alpha透明度）。谢谢@Benjie，你的评论完成了答案，我很久以前就在寻找它了。效果很好-链接到已经移动了。我意识到这是一个非常古老的答案，但是JSFIDLE不再工作。也许画布规格有所改变？