title: fabric canvas on top of another canvas
body: <p>Is there a way to have two fabricJS canvases one top of each other? I want to be able to draw on both canvases, but I want my lines contained only on Canvas Top. Canvas Bottom will have labels that will not be able to be drawn on Canvas Top.</p>
  
  <p><a href="https://i.stack.imgur.com/3Lpyd.png" rel="nofollow noreferrer">Crude image of what I'm trying to go for</a></p>
  
  <p>I thought I could layer two canvases together, one on top of another using css:</p>
  
  <pre><code>&lt;style&gt;
  .div {
      width: 1550px;
      height: 512px;
      border: solid 0px #4a7497;
      margin-top: -512px;
      margin-left: 100px;
      position: relative;
  }
  &lt;/style&gt;
  
  &lt;canvas id="canvasBottom" width="1650" height="612"&lt;/canvas&gt;
  &lt;canvas id="canvasTop" class="div" width="1550" height="512"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>My script just renders the bottom canvas. At this point, all i want to do is display both canvases but have my lines on canvas top.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $( document ).ready(function() {
      var canvasBottom = new fabric.Canvas('canvasBottom', { selection: false, backgroundColor: 'black', targetFindTolerance: 20});
      var canvas = new fabric.Canvas('canvasTop', { selection: false, backgroundColor: 'white', targetFindTolerance: 20});
  
      canvas.setBackgroundImage('http://website/image/background.png', 
      canvas.renderAll.bind(canvas));
  
      var grid = 15;
      var d = document,
      ge = 'getElementById';
  
      //draws vertical lines
      for (var i = 1; i &lt;= (&lt;?php echo $yLines; ?&gt;); i++) {
          canvas.add(new fabric.Line([ i * grid+100, 0, i * grid+100, 612],{stroke: 'yellow',strokeWidth: 1}));
      }
  
      canvas.renderAll();
      canvasBottom.renderAll();
  });
  &lt;/script&gt;
  </code></pre>