title: Using HTML5 Canvas to parse an image into a tileset
body: <p>I'm attempting to parse a tileset image (of type .png) into an array. I've got a test canvas that I'm using to draw it to first, then I am extracting the image info from it. When I run this code, it throws "Uncaught TypeError: Type error." I was able to log that this.mainTiles is empty. Any ideas? I don't know all the subtleties of Canvas yet, so I'm stuck. Thanks for the help! (Also, you can ignore the last line at the end, I was just using it to test--but I wanted to illustrate that it doesn't work).</p>
  
  <pre><code>function TileSet() {
      this.tileSheets = [];
      this.mainTiles = [];
      this.tileHeight = 32;
      this.tileWidth = 32;
  
  
  
  
      this.addSpriteSheet = function (spriteSheetLoc, name) {
  
          var tileSheet = new Image();
          try {
              tileSheet.src = spriteSheetLoc;
          }
          catch(err) {
              dMode.Log("Invalid TileSheet Src ( TileSet.setSpriteSheet() Failed ); ERR: " +  err);
          }
  
  
          tempContext.drawImage(tileSheet, 0, 0);
  
  
          var tilesX = tempContext.width / this.tileWidth;
          var tilesY = tempContext.height / this.tileHeight;
  
          for(var i=0; i&lt;tilesY; i++) {
              for(var j=0; j&lt;tilesX; j++) {
                  // Store the image data of each tile in the array.
                  this.mainTiles.push(tempContext.getImageData(j*this.tileWidth, i*this.tileHeight, this.tileWidth, this.tileHeight));
              }
          }
  
  
          context.putImageData(this.mainTiles[0], 5, 5);
  
  
  
      }
  </code></pre>
  
  <p>Edit: Here are how the canvases and such are defined:</p>
  
  <pre><code>var tempCanvas = document.getElementById("tempCanvas");
  var tempContext = tempCanvas.getContext("2d");
  
  var canvas = document.getElementById("gameCanvas");
  var context = canvas.getContext("2d");
  
  
  var Tiles = new TileSet;
  //this is the line it gets stuck at
  
  
  Tiles.addSpriteSheet("resources/tiles/tilea2.png");
  </code></pre>
  
  <p>Edit 2: After markE's answer, here's the latest update. Still feel as though I'm missing a fundamental property regarding .onload.</p>
  
  <pre><code>function TileSet() {
      this.Tiles = [];
      this.tileHeight = 32;
      this.tileWidth = 32;
      this.tileCount = 4;
  
  
  
  
      this.addSpriteSheet = function (spriteSheetLoc, name) {
  
          var tileSheet = new Image();
          tileSheet.onload = function() {
              tempCanvas.width = tileSheet.width;
              tempCanvas.height = tileSheet.height;
              tempContext.drawImage(tileSheet, 0, 0);
  
  
  
             for (var t=0;t&lt;this.tileCount;t++) {
         this.Tiles[t]=tempContext.getImageData(t*this.tileWidth,t*32,this.tileWidth,tileSheet.height);
                 dMode.Log(this.Tiles);
             }
  
  
              context.putImageData(this.Tiles[this.Tiles.length-1],0,0);
              dMode.Log(this.Tiles);
          }
  
          tileSheet.src = spriteSheetLoc;
  }
  </code></pre>