putImageData will not draw to the canvas

After splitting up the tileset http://mystikrpg.com/images/all_tiles.png

It still will not draw onto the <canvas> I know it gets put into the tileData[] because it outputs ImageData in the console.log(tileData[1]).

$(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<tilesY; i++)
    {
      for(var j=0; j<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]); // > ImageData
    startGame();
    }
    };

});

also

var startGame = function () {

   console.log("Trying to paint test tile onto convas...");

    try {
    context.putImageData(tileData[0], 0, 0);
    } catch(e) {
        console.log(e);
    }
    }

Answers


When you draw the image to the canvas initially, why are you:

context.drawImage(imageObj, ImageWidth, ImageHeight);

Looks like you may have the parameters confused and are trying to fill the area with ImageWidth, ImageHeight... instead, draw it to 0,0

context.drawImage(imageObj, 0, 0);

Here's your code adjusted a little bit:

var tileData = [];

var tileWidth, tileHeight
var ImageWidth = 736;
var ImageHeight = 672;
var tileWidth = 32;
var tileHeight = 32;
var tilesX;
var tilesY
var totalTiles;
canvas = document.getElementById("canvas");
canvas.width = ImageWidth;
canvas.height = ImageHeight;
context = canvas.getContext("2d");

var imageObj = new Image();
imageObj.src = "all_tiles.png";
imageObj.onload = function() {
  context.drawImage(imageObj, 0, 0);
// draw the image to canvas so you can get the pixels context.drawImage(imageObj, 0, 0);

  tilesX = ImageWidth / tileWidth;
  tilesY = ImageHeight / tileHeight;
  totalTiles = tilesX * tilesY;
  for(var i=0; i<tilesY; i++) {
    for(var j=0; j<tilesX; j++) {
      // Store the image data of each tile in the array.

      tileData.push(context.getImageData(j*tileWidth, i*tileHeight, tileWidth, tileHeight));
    }
  }

  // test it...
  // blank the canvas and draw tiles back in random positions 
  context.fillStyle = "rgba(255,255,255,1)";
  context.fillRect(0,0,canvas.width, canvas.height);
  for ( i = 0; i < 20; i++ ) {
    context.putImageData(tileData[ i ], Math.random() * canvas.width, Math.random() * canvas.height );
  }

};

There's no need to test 'all loaded' since it's just one image that you're splitting apart.


Need Your Help

SSRS 2005 - Sorting with page groups in SSRS 2005

reporting-services reportingservices-2005

One of our SSRS 2005 reports would time out when executed at the "All" level (was returning upwards of 80K records), so I added a group to the table whose sole purpose was to force a page break after