Javascript 如何将HTML元素（例如画布）塑造成多边形？

我只是想用另一个多边形而不是矩形来画画布，有没有办法用一组点来决定形状呢？

画布和所有元素一样，都是矩形。但是画布和所有元素一样，默认情况下是透明的，所以在画布中绘制一些东西，并使用CSS放置它们

例如：

const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
ctx.fillStyle='rgba（255,0,0,0.7）'；
ctx.beginPath（）；
ctx.moveTo（50,10）；
ctx.lineTo（250,50）；
ctx.lineTo（100140）；
ctx.fill（）
正文{
字体大小：xx大号；
}
帆布{
位置：绝对位置；
左：20px；
顶部：20px；
显示：块；
指针事件：无；/*因此您可以选择下面的文本*/
}


画布下的一些文本
如果您试图学习如何使用2D api在画布中绘制，请参见。如果你想学习WebGL，我的问题实际上是如何将画布塑造成多边形而不是矩形或正方形画布始终是矩形。但是画布是透明的，所以您只需在画布中绘制所需的内容，然后使用CSS将画布放置在所需的位置。如果你想为浮动元素定义一些形状，你可以使用CSS。你可以给画布提供剪辑路径，或者用这个剪辑路径CSS规则加上一个包装画布元素的任何东西，因为我了解了
外部的形状
！可惜它太新了，我一两年内都不会用了。边缘79！