javascript - HTML Canvas wrongly merging images -

so have problem goes like:

• i create canvas , set bg using css.
• i draw grid on canvas.
• i use function loop through array , depending on found, load .pngs , bind onload drawimage function them.

basicly, im drawing more 1 image on canvas. instead of following parameters (x, y), somehow "merges" (if 2 or more) pngs , draws them x/y of recent drawn one.

    this.drawships = function(){      var canvas = document.getelementbyid("mycanvas");     var context = canvas.getcontext("2d");      (var = 0; < 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         }         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);         }     } }