Javascript 画架JS隐藏绘制笔划边界外的部分

我正在尝试使用EaselJS创建一本配色书，类似于以下示例：

但是，我有不连续的形状，我希望用户为其着色，我希望在形状外部隐藏绘制笔划，同时允许用户在形状外部启动笔划。如果他们确实在允许的空间之外开始绘制，我仍然希望显示边界内的路径部分

我的第一个想法是使用一个完整的画布，并用填充了背景色的svg覆盖不可着色的部分，但这将涉及必须将svg上的单击事件传递给它所覆盖的画布上的相同像素

---

有更好的方法吗？

使用clipPath，或者如果你想传递事件指针事件：没有一个会有效。在EaselJS中，你可以使用另一个形状作为“掩码”，它使用clipPath@RobertLongson建议的形状。