個々のHTMLキャンバスパス/シェイプを個別に塗りつぶすにはどうすればよいですか？

Question

私はJavascriptとCanvasを使って練習しています。私はシェイプをレンダリングしているところ、またはカスタムシェイプを作成するために2〜2,3のラインを描画しています。今私は新しいImage（）;を使用するとき、個々に個々に色を付けることができる必要があります。その上に第1の形状を意味し、テクスチャは最後に描かれたctx形状上にレンダリングされる。ここ

が私のコードです：

https://jsfiddle.net/3dk4447k/2/

renderCanvas: function(topLength, heightLength, slant) { 
var canvases = Array.from(document.getElementsByClassName("DesignerCanvas")); 

for (var canvas of canvases) { 

    var ctx = canvas.getContext('2d'); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 

    ctx.strokeStyle = '#000'; 
    ctx.lineWidth = 0.5; 

    // String for Hanging 
    ctx.beginPath(); 
    ctx.rect(150, 0, 3, 75); 
    ctx.stroke(); 
    ctx.closePath(); 

    // Top Trimming 
    ctx.beginPath(); 
    ctx.moveTo((150 - (topLength/2)) , 80); 
    ctx.quadraticCurveTo(150 , 70, 150 + (topLength/2), 80); 
    ctx.lineTo(150 + (topLength/2), 83); 
    ctx.quadraticCurveTo(150 , 73, 150 - (topLength/2), 83); 
    ctx.closePath(); 
    ctx.stroke(); 

    // Shade Outter Body 
    ctx.beginPath(); 
    ctx.moveTo(150 + (topLength/2), 83); 
    ctx.quadraticCurveTo(150 , 73, 150 - (topLength/2), 83); 
    ctx.lineTo(150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength - 10), 150 + ((topLength/2) + slant), heightLength); 
    ctx.closePath(); 
    ctx.stroke(); 

    // Shade Inner Body 
    ctx.beginPath(); 
    ctx.moveTo(150 + ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength - 10), 150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength + 5), 150 + ((topLength/2) + slant), heightLength); 
    ctx.stroke(); 
    ctx.closePath(); 

    // Bottom Trimming 
    ctx.beginPath(); 
    ctx.moveTo(150 + ((topLength/2) + slant), (heightLength - 3)); 
    ctx.quadraticCurveTo(150 , (heightLength - 15), 150 - ((topLength/2) + slant), (heightLength - 3)); 
    ctx.lineTo(150 - ((topLength/2) + slant), heightLength); 
    ctx.quadraticCurveTo(150 , (heightLength + 5), 150 + ((topLength/2) + slant), heightLength); 
    ctx.closePath(); 
    ctx.stroke(); 

} 
}, 

init: function() { 
console.log("Product Designer: Initialized."); 
this.bindActions(); 
this.renderPage("DesignerTab1", "DesignerPanel1"); 
} 

} 

オーケー明確にするために、私の最終的な結果は、それが今であるかのようになく、テクスチャの背景を変更する機能を持つ基本的には同じはず私が作ったすべての道のたとえば、最初のパス文字列で画像を塗りつぶすことができます。次のパストップトリミングは画像などで塗りつぶすことができます。

問題は、新しい画像に画像を配置するときです）テクスチャは、シェイプ全体の最下部にレンダリングされます。これは、シェイプの上端を塗りつぶすだけのものではありません。

Answer 1

イメージは非同期にロードされます。イメージのonload関数は、renderCanvas関数が完了した後に開始されます。 onload関数が実行されると、現在のパスはrenderCanvas関数で定義された最後のパスになります。画像を目的のパスの内側に描画するには、onload関数の中で目的のパスを定義するコードを移動する必要があります。例えば、変更...

// String for Hanging 
ctx.beginPath(); 
    ctx.rect(150, 0, 3, 75); 
    var img = new Image(); 
    img.src = 'image here'; 
    img.onload = function() { 
     var pattern = ctx.createPattern(this,"repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    }; 
ctx.closePath(); 

に...

// String for Hanging 
var img = new Image(); 
img.src = 'image here'; 
img.onload = function() { 
    ctx.beginPath(); 
     ctx.rect(150, 0, 3, 75); 
     var pattern = ctx.createPattern(this,"repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    ctx.closePath(); 
};