画像の代わりに黒いキャンバス

Question

キャンバスに問題があります。たとえば、私の画像の代わりに黒い四角が1/10の時間、クロムにあるとしましょう。私のコードは以下の通りですが、この黒い表示を避けるためにどうすれば変更できますか？

<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：フル機能のドロー：私はあなたがイメージがロードされるまで待つようにしたいと考えてい

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

。

は交換してください：付き

main(); 

：

mapSprite.addEventListener('load', main);