Render Tiled Scene in Canvas

mountain.json

{ "height":15,
 "layers":[
        {
         "data":[79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 60, 61, 62, 30, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 28, 76, 77, 78, 30, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 76, 15, 78, 30, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 28, 76, 16, 78, 30, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 76, 31, 78, 30, 95, 96, 95, 96, 79, 80, 95, 156, 157, 158, 95, 96, 79, 80, 95, 28, 76, 32, 78, 112, 13, 13, 79, 80, 95, 96, 79, 172, 173, 144, 158, 80, 95, 96, 79, 28, 76, 47, 48, 61, 61, 62, 95, 96, 79, 80, 156, 143, 138, 160, 190, 96, 12, 13, 13, 111, 76, 16, 15, 16, 31, 78, 13, 13, 14, 96, 172, 138, 173, 174, 79, 80, 44, 45, 45, 127, 92, 93, 93, 93, 93, 94, 109, 110, 30, 80, 188, 189, 189, 190, 95, 96, 79, 80, 95, 44, 45, 45, 45, 45, 45, 45, 141, 142, 30, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 45, 45, 46, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96],
         "height":15,
         "name":"Ground",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }, 
        {
         "data":[92, 93, 93, 94, 56, 52, 51, 53, 54, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 51, 52, 52, 73, 66, 175, 176, 69, 70, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 67, 68, 73, 89, 82, 191, 192, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 84, 85, 90, 98, 223, 224, 101, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 104, 99, 101, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 4, 9, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 18, 19, 20, 21, 26, 23, 22, 0, 0],
         "height":15,
         "name":"Mountain",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 232, 233, 0, 0, 0, 0, 0, 0, 0, 165, 166, 0, 0, 0, 0, 0, 0, 0, 0, 0, 248, 249, 0, 0, 0, 0, 0, 0, 0, 181, 135, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 181, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 202, 203, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 218, 219, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 234, 235, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 250, 251, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 213, 214, 215, 0, 149, 150, 151, 0, 0, 149, 151, 0, 0, 0, 205, 222, 0, 0, 0, 0, 229, 230, 231, 0, 181, 182, 107, 151, 149, 119, 120, 151, 0, 0, 0, 0, 0, 0, 0, 0, 245, 246, 247, 0, 0, 0, 181, 107, 119, 136, 135, 120, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":15,
         "name":"Forest",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "image":"\/images\/mountain_landscape_23.png",
         "imageheight":512,
         "imagewidth":512,
         "margin":0,
         "name":"Mountain landscape",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "version":1,
 "width":20
}

mountain.tmx

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="15" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="Mountain landscape" tilewidth="32" tileheight="32">
  <image source="../../../games/art/bgs/mountain_landscape_23.png" width="512" height="512"/>
 </tileset>
 <layer name="Ground" width="20" height="15">
  <data encoding="base64">
   TwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAABwAAAA8AAAAPQAAAD4AAAAeAAAAXwAAAGAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAHAAAAEwAAABNAAAATgAAAB4AAABPAAAAUAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAAAcAAAATAAAAA8AAABOAAAAHgAAAF8AAABgAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAABwAAABMAAAAEAAAAE4AAAAeAAAATwAAAFAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAHAAAAEwAAAAfAAAATgAAAB4AAABfAAAAYAAAAF8AAABgAAAATwAAAFAAAABfAAAAnAAAAJ0AAACeAAAAXwAAAGAAAABPAAAAUAAAAF8AAAAcAAAATAAAACAAAABOAAAAcAAAAA0AAAANAAAATwAAAFAAAABfAAAAYAAAAE8AAACsAAAArQAAAJAAAACeAAAAUAAAAF8AAABgAAAATwAAABwAAABMAAAALwAAADAAAAA9AAAAPQAAAD4AAABfAAAAYAAAAE8AAABQAAAAnAAAAI8AAACKAAAAoAAAAL4AAABgAAAADAAAAA0AAAANAAAAbwAAAEwAAAAQAAAADwAAABAAAAAfAAAATgAAAA0AAAANAAAADgAAAGAAAACsAAAAigAAAK0AAACuAAAATwAAAFAAAAAsAAAALQAAAC0AAAB/AAAAXAAAAF0AAABdAAAAXQAAAF0AAABeAAAAbQAAAG4AAAAeAAAAUAAAALwAAAC9AAAAvQAAAL4AAABfAAAAYAAAAE8AAABQAAAAXwAAACwAAAAtAAAALQAAAC0AAAAtAAAALQAAAC0AAACNAAAAjgAAAB4AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAC0AAAAtAAAALgAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAA
  </data>
 </layer>
 <layer name="Mountain" width="20" height="15">
  <data encoding="base64">
   XAAAAF0AAABdAAAAXgAAADgAAAA0AAAAMwAAADUAAAA2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzAAAANAAAADQAAABJAAAAQgAAAK8AAACwAAAARQAAAEYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMAAABEAAAASQAAAFkAAABSAAAAvwAAAMAAAABVAAAAVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUwAAAFQAAABVAAAAWgAAAGIAAADfAAAA4AAAAGUAAABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoAAAAYwAAAGUAAABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAADAAAABAAAAAkAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAEgAAABMAAAAUAAAAFQAAABoAAAAXAAAAFgAAAAAAAAAAAAAA
  </data>
 </layer>
 <layer name="Forest" width="20" height="15">
  <data encoding="base64">
   AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6AAAAOkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApQAAAKYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4AAAA+QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1AAAAhwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMoAAADLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2gAAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqAAAA6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPoAAAD7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxQAAAMYAAADHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzgAAAAAAAAAAAAAAAAAAAAAAAADVAAAA1gAAANcAAAAAAAAAlQAAAJYAAACXAAAAAAAAAAAAAACVAAAAlwAAAAAAAAAAAAAAAAAAAM0AAADeAAAAAAAAAAAAAAAAAAAAAAAAAOUAAADmAAAA5wAAAAAAAAC1AAAAtgAAAGsAAACXAAAAlQAAAHcAAAB4AAAAlwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9QAAAPYAAAD3AAAAAAAAAAAAAAAAAAAAtQAAAGsAAAB3AAAAiAAAAIcAAAB4AAAAlwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  </data>
 </layer>
</map>

mountain_landscape_23.png

render_scene.js

$(function() {
  var c = $("canvas")[0].getContext("2d");

  var scene = {
    layers: [],
    renderLayer: function(layer) {
      // data: [array of tiles, 1-based, position of sprite from top-left]
      // height: integer, height in number of sprites
      // name: "string", internal name of layer
      // opacity: integer
      // type: "string", layer type (tile, object)
      // visible: boolean
      // width: integer, width in number of sprites
      // x: integer, starting x position
      // y: integer, starting y position
      if (layer.type !== "tilelayer" || !layer.opacity) { return; }
      var s = c.canvas.cloneNode(),
          size = scene.data.tilewidth;
      s = s.getContext("2d");
      if (scene.layers.length < scene.data.layers.length) {
        layer.data.forEach(function(tile_idx, i) {
          if (!tile_idx) { return; }
          var img_x, img_y, s_x, s_y,
              tile = scene.data.tilesets[0];
          tile_idx--;
          img_x = (tile_idx % (tile.imagewidth / size)) * size;
          img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;
          s_x = (i % layer.width) * size;
          s_y = ~~(i / layer.width) * size;
          s.drawImage(scene.tileset, img_x, img_y, size, size,
                      s_x, s_y, size, size);
        });
        scene.layers.push(s.canvas.toDataURL());
        c.drawImage(s.canvas, 0, 0);
      }
      else {
        scene.layers.forEach(function(src) {
          var i = $("<img />", { src: src })[0];
          c.drawImage(i, 0, 0);
        });
      }
    },
    renderLayers: function(layers) {
      layers = $.isArray(layers) ? layers : this.data.layers;
      layers.forEach(this.renderLayer);
    },
    loadTileset: function(json) {
      this.data = json;
      this.tileset = $("<img />", { src: json.tilesets[0].image })[0]
      this.tileset.onload = $.proxy(this.renderLayers, this);
    },
    load: function(name) {
      return $.ajax({
        url: "/maps/" + name + ".json",
        type: "JSON"
      }).done($.proxy(this.loadTileset, this));
    }
  };

  scene.load("mountain");
});