Toile noire au lieu de l'image

Question

J'ai un problème avec la toile. Disons, 1/10 fois j'ai un carré noir au lieu de mon image, sur le chrome. Mon code est le suivant, comment puis-je le modifier pour éviter cet affichage noir?

<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: tirage complet de la fonction:

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

Je crois que vous voulez attendre jusqu'à ce que l'image est chargée.

Remplacer:

main(); 

Avec:

mapSprite.addEventListener('load', main);