如果没有带有x，y坐标的画布上的警告框，则图像数组显示不正确

Question

我使用ajax从XML文件循环获取图像名称，并在HTML画布上显示X，Y坐标。但是没有警报框，图像显示不正确。意味着如果我放置警告框然后它显示正常，但如果我从代码中删除警报框，那么所有图像显示在最后的X，Y坐标。
我的HTML代码是 -

<canvas id="myCanvas"   style="border:1px solid #000000;"></canvas>

我的JavaScript代码是 -

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

for (iimg=0;iimg<ximg.length;iimg++)
{
   // here I am getting all below values in each variable

   var callimgdata=ximg[iimg].childNodes[0].nodeValue;
   var callout_imageX=xx[iimg].childNodes[0].nodeValue;
   var callout_imageY=xy[iimg].childNodes[0].nodeValue;
   var callout_imageHeight=xh[iimg].childNodes[0].nodeValue;
   var callout_imageWidth=xw[iimg].childNodes[0].nodeValue;

(function(){
   var letterImg = new Image();
   letterImg.onload = function() {
   ctx.drawImage(letterImg, callout_imageX, callout_imageY, callout_imageWidth, callout_imageHeight);
   }
   letterImg.src = sitePath+"ATOM/chapter1/book/"+callimgdata;
})(iimg);

// If I remove below alert then all images showing on last X, Y coordinates But all it is fine when I keep alert here.
 alert(callimgdata+" ,"+ callout_imageX +" ,"+ callout_imageY+" ,"+ callout_imageWidth+" ,"+ callout_imageHeight);