我试图用 canvas' 做到这一点globalCompositeOperation，但没有运气，所以我在这里问。这里有类似的问题，但我没有在其中找到我的案例。
我的画布区域中有图层（从下到上的绘制顺序）：
- 画布底部填充纯白色（#fff，带fillRect）
- 第一张图片
house是房子的照片。背景是透明的。（见下文） - 第二张图片
roofOverlay是覆盖“遮罩”的图片，屋顶区域为红色（可以是任何颜色，但为清晰起见为红色，见下文）
两张图片都占据了整个画布，并完美地排列在一起，这样红色的屋顶区域就与房子相匹配。
然后我有一个重复的背景repeatPattern图案，我只想在红色区域内使用：用repeatPattern. （可以是任何东西，但假设是六边形或其他）
在伪代码中，理想情况下是这样的：
roofOverlay.maskBackground(repeatPattern)
（在旁注中，我也希望能够弄乱背景图案 HSL 值，但我认为一旦我得到图案甚至显示这很简单）
预期结果：
预期的结果将是一栋屋顶带有 repeatPattern 图像纹理的房子。
注意：我知道带有蒙版的剪切路径，但我不能在这里使用它们。这个例子被简化了，为多个不同的房子绘制所有的路径将是太多的工作。我只有屋顶的覆盖 png 文件。
图片供参考
house
roofOverlay