キャンバスシェイプは、3のうち最後のキャンバスにのみレンダリングされるのはなぜですか？

Question

私のjsfiddleに見られるように、私は1つの形状をレンダリングしている3つのキャンバスを持っていますが、最後のキャンバスにのみレンダリングします。私は何かが欠けているかもしれないと思うが、私はキャンバスの要素をループしているので、すべてのもので動作すると思った。私はJavascriptを初めて使っています。

var c = document.getElementsByClassName("myCanvas"); 

for (var canvas of c) { 

var ctx = canvas.getContext("2d"); 

ctx.beginPath(); 
ctx.rect(150, 0, 3, 75); 

var img = new Image(); 
img.src = "https://assets.servedby-buysellads.com/p/manage/asset/id/26625"; 
img.onload = function() { 
    var pattern = ctx.createPattern(this,"repeat"); 
    ctx.fillStyle = pattern; 
    ctx.fill(); 
}; 
ctx.closePath(); 

} 

マイフィドル：

Here is my JSFiddle

Answer 1

あなたはgetElementsByClassNameから何を得るあなたは、配列をループするのと同じ方法で、それらを介して、あなたループので、HTMLCollectionないオブジェクトです。

for (var canvas of c)を使用してループしようとしている場所は、オブジェクトの場合はfor (var canvas in c)にする必要があります。しかし、前に述べたように、あなたが持っているものはオブジェクトではありません。

次に、画像上のonload関数が非同期であると考える必要があります。それらのすべてで同じイメージを使用しているので、イメージをロードした後でイメージを一度ロードしてからすべてのキャンバスをペイントしても問題ありません。

var c = document.getElementsByClassName("myCanvas"); 
// First load the image 
var img = new Image(); 
img.onload = function() { 
    // Once the image is ready, loop through the HTMLCollection 
    for (var i = 0; i < c.length; i++) { 
    var canvas = c[i]; 
    var ctx = canvas.getContext("2d"); 
    var pattern = ctx.createPattern(img, "repeat"); 
    ctx.beginPath(); 
    ctx.rect(150, 0, 3, 75); 
    ctx.fillStyle = pattern; 
    ctx.fill(); 
    } 
}; 
img.src = "https://assets.servedby-buysellads.com/p/manage/asset/id/26625";