Javascript 将绘制保持在图像边界内

我正在为iPad构建一个儿童绘画应用程序。基本上，我已经做了一个画布，其中有一个图像，并使用鼠标事件，一个可以在它的颜色。但是，我不希望颜色超出图像的边界。这怎么可能

---

我的应用程序代码非常类似。

当我正确理解您时，您希望用户无法销毁模板图像的线性部分

您可以将lineart图像放置在另一个HTML元素上（您可以使用另一个画布，但静态img可能就足够了），并将此图像放置在用户使用CSS定位绘制的画布上。下面的绘画画布将通过上面图像的透明部分看到

请注意，输入事件将由上面的对象捕获，而不是由下面的对象捕获。

1）解决方案1：我首先将图像背景设置为白色，内部部分透明，然后将globalcompositeoperation设置为目标

---

2） 解决方案2：我使用css将图像放置在画布元素的顶部，然后使用一个名为pointer events:none的css属性。这使事件通过前面的对象传递到后面的元素，在本例中，后面的元素是我的画布。因此，由于图像的内部透明部分，你可以看到画布上的颜色，而图像背景是白色的，你看不到它背后的任何东西。

好主意。但问题是我对画布和javascript还不熟悉，我的知识还不太先进。你能给我一个有效的解决方案吗？这将是一个很大的帮助。谢谢