Javascript not drawing on canvas

Question

Over here, I am trying to paint image on a canvas (the image is a tile sheet). However, I have checked, the loop works just fine, the code is being executed, the cases are correct (I tested it by logging text to console) however, nothing is being painted on the console. The image is being loaded just fine.

I really don't know what exactly causing this problem, there is no syntax error on the console. The following is my code, It might take a little time for anyone to analyse it, but any help is greatly appreciated.

Here is the image "monsterTileSheet.png" as defined in the script below:

var canvas = document.querySelector("canvas");
var drawingSurface = canvas.getContext("2d");
var image = new Image();
image.src = "monsterTileSheet.png";
image.addEventListener("load", loadHandler, false);

var spaceInc = 0; // increment counter
var inc = 5; // increment between the tiles
var imgSize = 80;

var map = [
    [0, 0, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
];

function adjustCanvas() {
    canvas.height = (map.length * imgSize) + (map.length * inc);
    canvas.width = (map[0].length * imgSize) + (map[0].length * inc);
}

var monster = {
    SIZE: 80,
    frames: 5,
    hiding: 0,
    jumping: 1,
    state: this.hiding,
    sourceX: 0,
    sourceY: 0,
    currentFrame: 0,
    COLUMNS: 3,
    start: function () {
        if (this.currentFrame < this.frames) {
            this.sourceX = Math.floor(this.currentFrame % this.COLUMNS) * this.SIZE;
            this.sourceY = Math.floor(this.currentFrame / this.COLUMNS) * this.SIZE;
            this.currentFrame++;
            renderImage();
        } else {
            window.clearInterval(interval);
            this.sourceX = 0;
            this.sourceY = 0;
            this.currentFrame = 0;
        }
    }
};

var x = 0;
var y = 0;

function renderMap() {
    for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[0].length; j++) {

            switch (map[i][j]) {
                case 0:
                    drawingSurface.drawImage(image,
                    0, 0, monster.SIZE, monster.SIZE, (j * imgSize) + spaceInc, i * imgSize, imgSize, imgSize);
                    if (spaceInc >= (map[0].length - 1) * inc) {
                        // reset increment
                        spaceInc = 0;
                    } else {
                        spaceInc += inc;
                    }
                    console.log("Case 0");
                    break;
                case 1:
                    x = map[i][j] * monster.SIZE
                    y = map[j] * monster.SIZE;
                    stGame();
                    console.log("Case 1");
                    break;
                default:
                    console.log(j);
                    break;
            }
        }
    }
}

function stGame() {
    interval = window.setInterval(function () {
        monster.start();
    }, 300);
}

function loadHandler() {
    adjustCanvas();
    renderMap();
}

function renderImage() {
    drawingSurface.drawImage(image,
    monster.sourceX, monster.sourceY, monster.SIZE, monster.SIZE,
    x, y, monster.SIZE, monster.SIZE);
}

Answer 1

I've made a fiddle based on your code: http://jsfiddle.net/52GYB/2/

Please notice that you've set imgSize to 80, while the tiles on the image you provided are 128x128 px. Canvas rendered the image properly but only top left corner 80x80, which is all white, so it looked like a bug.

Also, here:

case 1:
      x = map[i][j]*monster.SIZE
      y = map[j]*monster.SIZE; // map[j] is an Array not number 
      stGame();
      console.log("Case 1");
      break;

You're multiplying by Array, so y is NaN after this operation.

Remember to make sure you're passing proper values in your functions. Use console.log() or breakpoints in developer tools of your choice.

Answer 2

I dont think what is a problem source, but is a mistake:

{
    ...
    hiding: 0,
    state: this.hiding, // <-- undefined
    ...
}