title: Canvas/Fabric.js .loadFromJSON() replaces entire canvas
body: <p>I have 2 JSON objects:</p>
  
  <ul>
  <li><p><strong>jSONObject1</strong> </p>
  
  <p>{"type":"group","originX":"left","originY":"top","left":0,"top":0,"objects":
  [{"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":430,"y2":430},
          {"type":"line","stroke":"grey","x1":430,"x2":20.0,"y1":20.0,"y2":20.0},
          {"type":"line","stroke":"grey","x1":430,"x2":430,"y1":20.0,"y2":430},
          {"type":"line","stroke":"grey","x1":20.0,"x2":20.0,"y1":430,"y2":20.0}]}</p></li>
  </ul>
  
  <p><em>contains an array of lines to be drawn on the canvas that make up a building floorplan</em></p>
  
  <ul>
  <li><p><strong>jSONObject2</strong></p>
  
  <p>{"type":"group","originX":"left","originY":"top","left":0,"top":0,
  "objects":[{"type":"rect","originX":"left","originY":"top","left":45,"top":-405,"width":60,"height":60,"fill":"red"},
          {"type":"rect","originX":"left","originY":"top","left":105,"top":-405.0,"width":60,"height":60,"fill":"red"},
          {"type":"rect","originX":"left","originY":"top","left":165,"top":-405.0,"width":60,"height":60,"fill":"blue"},
          {"type":"rect","originX":"left","originY":"top","left":225,"top":-405.0,"width":60,"height":60,"fill":"blue"}]}</p></li>
  </ul>
  
  <p><em>contains an array of rectangles to be drawn on the canvas that show metrics for different points in the floorplan.</em></p>
  
  <p>I am using .loadFromJSON(...) to render the desired lines/rectangles on the canvas. The problem is that every time this function gets called, it completely replaces everything on the canvas instead of overlaying the floor plan metric rectangles over the floorplan.</p>
  
  <p><strong>What is the best way to render 2 separate JSON objects onto a Canvas element without one overwriting the other?</strong></p>
  
  <p>I have looked at <a href="https://github.com/kangax/fabric.js/issues/704]" rel="nofollow">this GitHub issue</a> which suggests using the <em>fromObject()</em> method to add objects from JSON without clearing the entire canvas. In theory this sounds like a decent idea... This page also leads to 2 jsfiddle "examples" of how to use this fromObject method, <a href="http://jsfiddle.net/Kienz/sFGGV/6/" rel="nofollow">one of which doesn't even work</a> and the other of which seems to be working but is very unclear.</p>
  
  <p><em>Trying to use loadFromJSON() (Overwrites):</em></p>
  
  <pre><code>Canvas canvas = document.getElementById("myCanvas");
  canvas.loadFromJSON(JSON.stringify(jSONObject1))
  canvas.loadFromJSON(JSON.stringify(jSONObject2))
  canvas.renderAll();
  </code></pre>
  
  <p><em>Trying to use fromObject() (Doesn't work)</em></p>
  
  <pre><code>var jSONObjects = jSONObject1.concat(jSONObject2);
  for (var i = 0; i &lt; jSONObjects.length; i++) {
      var klass = fabric.util.getKlass(jSONObjects[i].type);
      var obj = klass.fromObject(jSONObjects[i]);
      canvas.add(obj);
  }
  canvas.renderAll();
  </code></pre>
  
  <p>Thanks in advance.</p>