Javascript 黑色画布代替图像

我的画布有问题。比方说，我在chrome上用黑色方块代替图像的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);
    }
}

---

我相信您希望等待图像加载

替换：

main();

与：

---

等待图像加载？在结尾处执行mainSprite.onload=main而不是main，谢谢您的回答。这似乎解决了图像问题。实际上，我的函数比edit1复杂一点。我有两个包含坐标的数组，希望在图像上绘制它们。根据你的解决方案，我有了自己的图像，但现在，我没有坐标交叉。@ranell我已经回答了这个问题。如果你有一个新问题-创建一个新问题。建议：创建JSFIDLE来重现问题。现在这个问题并不是自足的。

mapSprite.addEventListener('load', main);