title: canvas and DOM layering
body: <p>I am making a HTML5 game using <code>melonJS</code> engine... which makes use of the canvas (imports and uses Tiled TMX maps)</p>
  
  <p>I have created a puzzle using DOM elements (which I found much easier than making the puzzle in Tiled map editor). The player entity class (class that melonJS helps me draw to the canvas and animate) needs to be able to navigate the puzzle when it pops up... </p>
  
  <p>Unfortunately, the DOM overlaps the player sprite since the puzzle sits apart from the DOM.</p>
  
  <p><a href="http://jsfiddle.net/Lrcjv4kf/1/" rel="nofollow noreferrer">SIMPLIFIED FIDDLE</a></p>
  
  <p>To fix this:</p>
  
  <ul>
  <li><p>I thought I could adjust the player's z-index to be more than the DOM puzzle... but it still remains overlapped. Here, the player.z index and puzzle z index show that the <code>z-index</code> doesn't matter because they are on completely different layers... otherwise the player's <code>36</code> would clearly overlap the puzzle's <code>0</code>:</p>
  
  <pre><code>var player = me.game.world.getChildByName("mainPlayer")[0];
  log(player.z);  //logs 36
  log($("#puzzle").css("z-index"));  //logs 0
  </code></pre></li>
  <li><p>I figured I could add a secondary canvas, and: </p>
  
  <p>-- temporarily remove/hide the player's sprite (game.PlayerEntity) on the game canvas  </p>
  
  <p>-- add a new player sprite to the top layer canvas</p>
  
  <p>-- give that player sprite focus/control - aka. bind the keys to that    new player object</p></li>
  </ul>
  
  <p>But that seems like a lot of unnecessary work</p>
  
  <p><strong>What I mean:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/H9JK0.png" alt="enter image description here"></p>
  
  <p>Is there a way to draw a canvas element such that I can see the player sprite?</p>