title: Reading JSON Tiled map editor file and displaying to canvas
body: <p>Im following this <a href="http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens" rel="noreferrer">this</a> tutorial to be able to load json map files created by tiled map editor in my javascript/canvas game.</p>
  
  <p>ive got to the point where i have implemented my own kind of version, and am getting no errors in firebug in console or net etc.</p>
  
  <p>And as far as i can see, by putting in console.logs and alerts, the script is running absolutely fine!</p>
  
  <p>The problem is the canvas stays blank! when it should have a tilemap now on it.</p>
  
  <p>Here is my version of the tutorial implemented in my game:</p>
  
  <pre><code>function Level() {
  var c;
  var data;
  var layers = [];
  
  this.get_map = function(name,ctx){
      c = ctx;
      $.getJSON('maps/'+ name + '.json', function(json){
      get_tileset(json);
      });
  };
  
  function get_tileset(json) {
      data = json;
      this.tileset = $("&lt;img /&gt;", { src: json.tilesets[0].image })[0];
      this.tileset.onload = renderLayers(this);
  }
  
  function renderLayers(layers){
      layers = $.isArray(layers) ? layers : data.layers;
      layers.forEach(renderLayer);
  }
  
  function renderLayer (layer){
      if (layer.type !== "tilelayer" || !layer.opacity) {
          alert("Not a tileLayer");
      }
      var s = c.canvas.cloneNode(),
              size = data.tileWidth;
      s = s.getContext("2d");
  
      if (layers.length &lt; data.layers.length) {
          layer.data.forEach(function(tile_idx, i) {
              if (!tile_idx) { return; }
              var img_x, img_y, s_x, s_y,
                  tile = 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(this.tileset, img_x, img_y, size, size,
                  s_x, s_y, size, size);
          });
  
          layers.push(s.canvas.toDataURL());
          c.drawImage(s.canvas, 0, 0);
      }
      else {
          layers.forEach(function(src) {
              var i = $("&lt;img /&gt;", { src: src })[0];
              c.drawImage(i, 0, 0);
          });
      }
  
  }
  
  }
  </code></pre>
  
  <p>and it is called from my main javascript file which is this:</p>
  
  <pre><code>$(document).ready(function(){
  
  var canvas = document.getElementById("TBG");
  var ctx = canvas.getContext("2d");
  
  var ui = new Gui();
  var level = new Level();
  
  //----------Login/Register Gui --------------
  $('#TBG').hide();
  $('#load-new').hide();
  $('#reg').hide();
  $('#login').hide();
  
  //if login_but is clicked do ui.login function
  $('#login_but').click(ui.login);
  //if reg_but is clicked do ui.register function
  $('#reg_but').click(ui.register);
  
  $('#new_but').click(function(){
      game_settings("new");
  });
  
  $('#load_but').click(function(){
      game_settings("load");
  });
  
  //if login_sumbit button is clicked do ui.login_ajax function
  $("#login_submit").click(ui.login_ajax);
  
  $("#reg_submit").click(ui.register_ajax);
  
  $("#welcome").on("click", "#logout_but", ui.logout);
  
  //________________________
  
  //Initialisation of game
  
  function game_settings(state){
      if(state == "load"){
          ui.load_game();
          //do ajax call to load user last save
          level.get_map("level_01",ctx);
      }
      else{
          //set beginning params
  
  
          //Change screens
          ui.new_game();
          alert("new game");
      }
  }
  
  // End Loop ------------------------------------------------------
  
  
  
  
  
  });
  </code></pre>
  
  <p>I don't suppose you lovely people could spot why the tile-map isn't being printed to my canvas?</p>
  
  <p>Thanks for any help Tom</p>