Canvas zeichnet Inhalte nicht richtig

[Mo3b]

Hi,
ich experimentiere im Moment mit Canvas herum. Bis jetzt teste ich den Code nur unter Firefox, also kein Plan wie das bei anderen Browser aussieht (Interessiert mich im Moment auch nicht).

Hier ein Codestück:

 for(var j = 0; j < allcomponents.length; j++) 
 { 
    var xm,ym; 
   xm = Math.round(allcomponents[j].a/1)*1; 
   ym = Math.round(allcomponents[j].b/1)*1; 
    var img = new Image();   // Create new Image object   
    img.src='../images/' + allcomponents[j].type + '.png'; 
    ctx.drawImage(img, xm, ym); 
    if(lines_points) { 
         for(var j = 0; j < allcomponents.length; j++) 
 { 
        ctx.beginPath(); 
        ctx.arc(allcomponents[j].a, allcomponents[j].b, 5,0, 2*Math.PI, false); 
        ctx.closePath(); 
        ctx.fill(); 
        } 
    } 
 } 
    ctx.beginPath(); 
    ctx.moveTo(50,50); 
    ctx.lineTo(allcomponents[0].a,allcomponents[0].b+15); 
    ctx.strokeStyle ="#800000"; 
    ctx.stroke();

Wird die if-Abfrage nicht ausgeführt, so werden die Bilder richtig gemalt. Wenn doch, dann werden nur noch die Kreise gemalt, nicht aber die Bilder.

Ich habe sicher einige grundsätzliche Dinge noch nicht verstanden. Wäre super wenn jemand sieht was da alles falsch ist.

Mfg,
Mo3b

 

[Gilles]

Du wartest übrigens nicht ab, bis die Bilder geladen worden sind. Das könnte dieses Mysterium erklären

img.onload = function(){
  // execute drawImage statements here 
};

Wieso es dann in der forschleife funktioniert weiss ich jedoch auch nicht. Aber dein Bild sollte gezeichnet werden, wenn du es dann mal ausladen lässt und dann erst mit dem zeichnen anfängst ;)