title: Drawing multiple images on one canvas
body: <p>I have an array that contains all the information about how the <code>image</code> should be drawn.  I want to draw 2 <code>images</code> and when I do it, it's only drawing the last image.  What can I do?</p>
  
  <pre><code>for(i = 0; i &lt; tiles.length; i++)
  {
      var sourceX = tiles[i][5];
      var sourceY = tiles[i][6];
      var sourceWidth = tiles[i][9];
      var sourceHeight = tiles[i][10];
      var destWidth = sourceWidth;
      var destHeight = sourceHeight;
      var destX = tiles[i][7];
      var destY = tiles[i][8];
  
      var imageObj = new Image();
      imageObj.onload = function()
      {
          context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = tiles[i][4];
  }
  </code></pre>