title: Deserializing JSON from local storage to Fabric JS object - JSON created from form data
body: <p>I'm using Fabric js for a project I'm working on and encountering a few difficulties.  My aim is to allow a user to enter details into a form.  The form will then be turned into a JSON object and stored using local storage.  </p>
  
  <p>Upon pressing submit the user is taken to a new page where the JSON is retrieved and objects are created.</p>
  
  <p>I'm having difficulty with the latter part.  Getting the information from the form into JSON is working fine, various tests show that the output is as it should be.</p>
  
  <p>When creating the object there are problems, the object is showing on the canvas as a simple border with corners, it can be moved and selected but all other attributes such as size and colour are lost.  I think it's because of how the JSON is being deserilized.  I've searched for a solution but yet to find one, any help is hugely appreciated.</p>
  
  <p>Sample code:</p>
  
  <p>This is my test instance that creates an object as expected:</p>
  
  <pre><code>var a = {
      type: "rect",
      left:200,
      top:110,
      fill:'red',
      width:80,
      height:50
  };
  </code></pre>
  
  <p>The same as above but from the local storage:</p>
  
  <pre><code>[Log] From JSON:    {"type":"rect","top":"110","left":"200","fill":"red","height":"50","width":"80"} (sim.html, line 135)
  </code></pre>
  
  <p>To get the data I'm using:</p>
  
  <pre><code>var test = localStorage.getItem("Number1");
  console.log("From JSON: " +test);
  
  var obj = JSON &amp;&amp; JSON.parse(test) || $.parseJSON(test);
  console.log(obj.type +"-"+ obj.left);
  </code></pre>
  
  <p>When a is added in the below method it works yet obj does not.  The main difference I can see if the quotations but I'm not sure if that is the issue and if so how to remove it simply.</p>
  
  <p>Function to iterate over and render objects:</p>
  
  <pre><code>    fabric.util.enlivenObjects([circle1, obj], function(objects) {
      var origRenderOnAddRemove = canvas.renderOnAddRemove;
      canvas.renderOnAddRemove = false;
  
      objects.forEach(function(o) {
          canvas.add(o);
      });
      canvas.renderOnAddRemove = origRenderOnAddRemove;
      canvas.renderAll();
  });
  </code></pre>
  
  <p>Many thanks for any help.</p>