title: JavaScript/HTML5 Canvas - Load array of images
body: <p>I have a folder of images, altogether 32x32 tiles. I am trying to load these images using JavaScript, onto an HTML5 canvas.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>window.onload = function(){
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext("2d");
      var imageObj = new Image();
      var tiles = [];
  
      canvas.width = 512;
      canvas.height = 352;
  
  
      for (x = 0; x &lt;= 520; x++) {
          imageObj.src = "line_tile/t"+x+".png";
          tiles.push(imageObj);
      } 
  
      var theX;
      var theY;
      for (x = 0; x &lt;= 10; x++) {
          for (y = 0; y &lt;= 15; y++) {
  
              theX = x*32;
              theY = y*32;
  
              context.drawImage(tiles[2], theY, theX,32,32);
              console.log("Tile X: "+x+" | Tile Y: "+y+" - X Pos: "+theX+" | Y Pos: "+theY);
          }
      } 
  };
  </code></pre>
  
  <p>The problem is that this code only loads up the last tile (in this case <code>tile[520]</code>). In reality I want to load all the tiles. No matter what. How do I properely put a set of images into an array and load it?</p>