이미지 대신 검은 색 캔버스

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> 

편집 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);