Schwarze Leinwand anstelle von Bild

Question

Ich habe ein Problem mit Leinwand. Nehmen wir an, 1/10 mal habe ich schwarzes Quadrat statt meines Bildes auf Chrom. Mein Code ist wie folgt, wie kann ich ihn ändern, um dieses schwarze Display zu vermeiden?

<canvas id="Canvas" width="954" height="267"></canvas> 

<script> 

var canvas = document.getElementById('Canvas'); 
var context = canvas.getContext("2d"); 

// Map sprite 
var mapSprite = new Image(); 
mapSprite.src = 'image.png'; 

var main = function() { 
    draw(); 
}; 

var draw = function() { 
    // Clear Canvas 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    // Draw diagramme 
    context.drawImage(mapSprite, 0, 0, 954, 267); 
} 

main(); 
</script> 

EDIT 1: volle Funktion draw:

var draw = function() { 
    // Clear Canvas 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    // Draw diagramme 
    context.drawImage(mapSprite, 0, 0, nextWidth, nextHeight); 

    //draw all precedent cross 
    cross = new Image(); 
    cross.src = "cross.png"; 

    for (var i = 0; i < array_x.length; i++) { 
    context.drawImage(cross, array_x[i], array_y[i], 10, 10); 
    } 
} 

Answer 1

Ich glaube, Sie warten wollen, bis das Bild geladen wird.

ersetzen:

main(); 

mit:

mapSprite.addEventListener('load', main);