HTML Canvas错误地合并图像

Question

所以我有这个问题，如：

• 我创建了一个画布并使用CSS设置BG。
• 我在画布上画一个网格。
• 然后我使用一个函数循环遍历数组，并根据发现的内容，加载.PNGs并将onload drawImage函数绑定到它们。

基本上，我在画布上绘制多个图像。但不是遵循参数（X，Y），而是以某种方式＆＃34;合并＆＃34;所有（如果是2个或更多）PNG并绘制最近绘制的PNG的X / Y.

    this.drawShips = function(){

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    for (var i = 0; i < participants.length; i++){
        var ship = participants[i];
        var loc = ship.location;
        var img;

        var offsetX = -20;
        var offsetY = -20;

        if (ship.name == "Hyperion"){
            var img = new Image();
                img.onload = function(){
                    context.drawImage(img, loc[0] + offsetX, loc[1] + offsetY);
                }
                img.src = "hyperion.png";
                console.log("draw: " + ship.name + " @ " + loc);
                // continue doesnt help
        }
        if (ship.name == "Primus"){
            var img = new Image();
                img.onload = function(){
                    context.drawImage(img, loc[0] + offsetX, loc[1] + offsetY);
                }
                img.src = "primus.png";
                console.log("draw: " + ship.name + " @ " + loc);
        }
        if (ship.name == "Sharlin"){
            var img = new Image();
                img.onload = function(){
                    context.drawImage(img, loc[0] + offsetX, loc[1] + offsetY);
                }
                img.src = "sharlin.png";
                console.log("draw: " + ship.name + " @ " + loc);
        }
    }
}