Javascript 如何在html5中填充纹理（并且仍然能够更改颜色？）

我正在创建一个html5画布绘图应用程序

我想用粗糙的纹理作画。我知道我可以使用填充特定图像作为纹理，但是颜色会锁定到该图像。我仍然希望能够通过颜色选择器更改颜色。我只想让这些砂砾穿过

有哪些解决方案可用？

请阅读我对“着色”图像的回答：

您始终可以非常轻松地操纵图像的像素数据，以发出与其原始色调不同的色调（或者，如果对RGB进行平均，则根本没有色调，从而获得灰度图像）

所以这至少是一个选择

---

这里要做的是：不要使用图像作为纹理，而是将图像绘制到临时画布上，然后使用颜色选择器修改整个画布的色调，而不是使用该画布作为图案。（图像和画布都是创建图案的有效输入）

检查我对这个问题的回答：