Warum wird Canvas Shape nur auf der letzten Leinwand von 3 gerendert?

Question

Wie auf meinem Jfiddle zu sehen, habe ich 3 Leinwände, die eine Form Rendern, aber es nur auf der letzten Leinwand rendert. Ich denke, ich könnte etwas vermissen, aber ich habe über die Canvas-Elemente geloopt, so dass ich dachte, es würde nur auf allen von ihnen funktionieren. Ich bin neu in Javascript, tut mir leid, wenn es dummes Denken ist.

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(); 

} 

Mein Fiddle:

Here is my JSFiddle

Answer 1

Was Sie von getElementsByClassName erhalten, ist ein HTMLCollection und nicht ein Objekt, so dass Sie eine Schleife durch sie auf die gleiche Weise würden Sie eine Schleife durch ein Array.

Sie versuchten, es durchlaufen mit for (var canvas of c), die for (var canvas in c) sein sollte, wenn es ein Objekt war. Aber wie bereits erwähnt, ist das, was Sie haben, kein Objekt.

Dann müssen Sie berücksichtigen, dass die onload-Funktion für ein Bild asynchron ist. Da Sie für alle Bilder dasselbe Bild verwenden, ist es in Ordnung, das Bild einmal zu laden und dann alle Bilder zu malen, nachdem das Bild geladen wurde.

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";