title: Save canvas created with fabric.js
body: <p>i want to store the canvas generated with the fabric.js, i have canvas as like below in my page</p>
  <pre><code> &lt;div class=&quot;canvas-container&quot; style=&quot;width: 600px; height: 600px; position: relative; -moz-user-select: none;&quot;&gt;
      &lt;canvas height=&quot;600&quot; width=&quot;600&quot; id=&quot;design-stage&quot; class=&quot;lower-canvas&quot; style=&quot;position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;&quot;&gt;&lt;/canvas&gt;
      &lt;canvas class=&quot;upper-canvas &quot; style=&quot;position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;&quot; width=&quot;600&quot; height=&quot;600&quot;&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  </code></pre>
  <p>as said in the fabric.js documentation <a href="http://fabricjs.com/fabric-intro-part-3/#serialization" rel="nofollow noreferrer">serialization</a> tried to save the canvas as json, but am unable to get the objects in the canvas it always returns empty as follows</p>
  <pre><code>{&quot;objects&quot;:[],&quot;background&quot;:&quot;&quot;}
  </code></pre>
  <p>and my code to generate the json is follow</p>
  <pre><code>var canvas = new fabric.Canvas('design-stage');
  console.log(canvas);
  var json = JSON.stringify( canvas.toJSON()  );
  console.log(json);
  </code></pre>
  <p>Code to add the images on canvas</p>
  <pre><code>self._loadItemImage = function (url) { 
  fabric.Image.fromURL(url, function (img) { 
  var w = img.width; var h = img.height;
   var size = self._resizeImage(w, h, self._width - 100, self._height - 100); 
   img.set({ left: self._width / 2, top: self._height / 2, originX: 'center', originY: 'center', hasBorders: false, hasControls: false, hasRotatingPoint: false, selectable: false, scaleX: 0.5, scaleY: 0.5 }); 
   self._motorImg = img; 
   self._canvas.add(self._motorImg);
   }); 
   };
  </code></pre>
  <p>Note:
  Am not created objects using the functions in the fabric.js, i have loaded the svg images from a directory and added those images into the canvas by positioning the images</p>