Javascript 如何通过一些图像或svg剪裁画布上的自由绘图区域？

我正在使用fabricjs库激活自由绘图模式。我的目的是将自由绘图区域绑定到一些非原始形状（人类形状）

我已经测试了两种实现：

1） 将剪辑区域转换为SVG，然后将SVG与

canvas.clipTo一起使用
但我发现了问题：从那一刻起，缩放画布是不可能的

2） 使用具有透明背景色的图像作为画布的背景图像。
这个案子根本不起作用

也许你知道当画笔路径与透明元素相交时，如何设置透明画笔的颜色？
或者其他解决方案（没有fabricjs）来帮助我实现目标。
介绍了几种方法来限制在原生html5画布上的任意形状内绘图。