黑色画布代替图像

Question

I have a problem with canvas. Let's say, 1/10 time I have black square instead of my image, on chrome. My code is as follow, how can I modify it in order to avoid this black display?

<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: full 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, 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

I believe you want to wait until image is loaded.

Replace:

main();

With:

mapSprite.addEventListener('load', main);