title: Javascript not drawing on canvas
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is the image "monsterTileSheet.png" as defined in the script below:</p>
  
  <p><img src="https://i.stack.imgur.com/dhkdO.png" alt="http://imgur.com/m0SY4UE"></p>
  
  <pre><code>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 &lt; 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 &lt; map.length; i++) {
          for (var j = 0; j &lt; 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 &gt;= (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);
  }
  </code></pre>