title: drawImage in JavaScript (Canvas)
body: <p>I have an array of image objects which hold all the necessary info like path,x, y, w, h. Now i want to draw all those images on canvas in a loop.. but when i do so, it only draws the first image. Here is the code:</p>
  
  <pre><code>for(var i=0; i&lt;shapes.length; i++)
  {
      var A = shapes.pop();
      if(A.name == 'image' &amp;&amp; A.pageNum == pNum)
      {
          var img = new Image();
          img.src = A.path;
          img.onload = function() {
              context.drawImage(img, A.x, A.y, A.w, A.h); 
          }
      }
  }
  </code></pre>
  
  <p>i checked all the info in the shapes array... inside the if condition, before calling drawImage function, all the info of each image is correct but for some strange reason it doesn't display images except the 'last' in the array (the one which pops out last)</p>