canvas' でこれを実現しようとしましglobalCompositeOperationたが、運がなかったので、ここで質問しています。ここにも同様の質問がありますが、その中に私のケースは見つかりませんでした。
キャンバス領域にレイヤーがあります（下から上への描画順）：
- キャンバスベースは真っ白で塗りつぶされています（#fff、fillRectあり）
- 最初
houseの画像は家の写真です。背景は透明です。（下記参照） - 2 番目の画像
roofOverlayは、屋根の領域が赤く着色されたオーバーレイ「マスキング」画像です (わかりやすくするために赤以外の任意の色を使用できます。以下を参照してください)。
両方の画像がキャンバス全体を占め、互いの上に完全に並べられているため、赤い屋根の領域が家と一致しています。
次に、赤い領域内でのみrepeatPattern使用したい繰り返しの背景パターンがあります。赤い領域を. （何でもかまいませんが、六角形などを想定してください）repeatPattern
疑似コードでは、これは理想的には次の行の何かになります。
roofOverlay.maskBackground(repeatPattern)
（ちなみに、背景パターンのHSL値をいじりたいと思っていますが、パターンを表示することさえできれば、それは非常に簡単だと思います）
期待される結果：
予想される結果は、repeatPattern 画像でテクスチャリングされた屋根のある家です。
注: マスクを使用したクリッピング パスは認識していますが、ここでは使用できません。この例は単純化されており、複数の異なる家のすべてのパスを描画するのは非常に手間がかかります。屋根用のオーバーレイされたpngファイルしかありません。
参考画像
house
roofOverlay