Javascript HTML画布错误地合并图像

所以我遇到了这样的问题：

我创建了一个画布，并使用CSS设置背景。 我在画布上画了一个网格。 然后我使用一个函数在数组中循环，根据找到的内容，我加载.PNGs并将onload drawImage函数绑定到它们。 基本上，我在画布上画了不止一个图像。但它不遵循参数X，Y，而是以某种方式合并所有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);
        }
    }
}