title: putImageData will not draw to the canvas
body: <p>After splitting up the tileset <a href="http://mystikrpg.com/images/all_tiles.png" rel="nofollow">http://mystikrpg.com/images/all_tiles.png</a> </p>
  
  <p>It still will not draw onto the <code>&lt;canvas&gt;</code> I know it gets put into the <code>tileData[]</code> because it outputs ImageData in the <code>console.log(tileData[1])</code>.</p>
  
  <pre><code>$(document).ready(function () {
  
  var tileWidth, tileHeight
  ImageWidth = 736;
  ImageHeight = 672;
  tileWidth = 32;
  tileHeight = 32;
  
      console.log("Client setup...");
      canvas = document.getElementById("canvas");
      canvas.width = 512;
      canvas.height = 352;
      context = canvas.getContext("2d");
      canvas.tabIndex = 0;
      canvas.focus();
      console.log("Client focused.");
  
      var imageObj = new Image();
      imageObj.src = "./images/all_tiles.png";
      imageObj.onload = function() {
      context.drawImage(imageObj, ImageWidth, ImageHeight);
  
  
      var allLoaded = 0;
      var tilesX = ImageWidth / tileWidth;
      var tilesY = ImageHeight / tileHeight;
      var totalTiles = tilesX * tilesY;        
      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.
          tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
          allLoaded++;
        }
      }
  
  
      if (allLoaded == totalTiles) {
      console.log("All done: " + allLoaded); // 483
      console.log(tileData[1]); // &gt; ImageData
      startGame();
      }
      };
  
  });
  </code></pre>
  
  <p>also</p>
  
  <pre><code>var startGame = function () {
  
     console.log("Trying to paint test tile onto convas...");
  
      try {
      context.putImageData(tileData[0], 0, 0);
      } catch(e) {
          console.log(e);
      }
      }
  </code></pre>