title: fabricjs loadFromJSON with subclass objects issue
body: <p>I'm tying to render a some canvas objects that I previously saved on my database.</p>
  
  <p>My issue is very similar to this one <a href="https://groups.google.com/forum/#!topic/fabricjs/1hykgQ0aVhE" rel="nofollow">https://groups.google.com/forum/#!topic/fabricjs/1hykgQ0aVhE</a>. 
  Unfortunally the corrected jsFiddle is not working.</p>
  
  <p>I'm using a custom subclass, the <code>LabeledRect</code> as described on fabricjs.com/fabric-intro-part-3/ 
  I modified the name of <code>LabelRect</code> in <code>Labelrect</code> as suggested in the google group forum.</p>
  
  <p>I tried using the <code>enlivenObjects</code> method but didn't resolve my problem.</p>
  
  <p>I posted my code on <a href="http://jsfiddle.net/polybogdan/dor143xr/3/" rel="nofollow">jsFiddle</a> and in the snippet below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fabric.Labeledrect = fabric.util.createClass(fabric.Rect, {
  
    type: 'labeledRect',
  
    initialize: function(options) {
      options || (options = {});
  
      this.callSuper('initialize', options);
      this.set('id', options.id || '');
      this.set('label', options.label || '');
      this.set('htmlContent', options.htmlContent || '');
    },
  
    toObject: function() {
      return fabric.util.object.extend(this.callSuper('toObject'), {
        label: this.get('label'),
        htmlContent: this.get('htmlContent'),
        id: this.get('id')
      });
    },
  
    _render: function(ctx) {
      this.callSuper('_render', ctx);
  
      ctx.font = '20px skf_chevin_medium';
      ctx.fillStyle = '#333';
      ctx.fillText(this.label, -this.width / 2, -this.height / 2 + 20, this.width);
  
      ctx.font = "20px skf_chevin_medium";
      // Create gradient
      var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
      gradient.addColorStop("0", "magenta");
      gradient.addColorStop("0.5", "blue");
      gradient.addColorStop("1.0", "red");
      // Fill with gradient
      ctx.fillStyle = gradient;
      ctx.fillText(this.htmlContent, -this.width / 2, -this.height / 2 + 40, this.width);
    },
  });
  
  
  
  //fabric.Labeledrect.fromObject = function (object, callback) {
  //    var _enlivenedObjects;
  //    fabric.util.enlivenObjects(object.objects, function (enlivenedObjects) {
  //        delete object.objects;
  //        _enlivenedObjects = enlivenedObjects;
  //    });
  //    return new fabric.Labeledrect(_enlivenedObjects, object);
  //};
  
  fabric.Labeledrect.fromObject = function(object, callback) {
    fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
      delete object.objects;
      callback &amp;&amp; callback(new fabric.Labeledrect(enlivenedObjects, object));
    });
  };
  fabric.Labeledrect.async = true;
  
  var canvas = new fabric.Canvas('c', {
    backgroundColor: 'rgb(100,100,200)',
    selectionColor: 'blue',
    selectionLineWidth: 2
  });
  canvas.on({
    'object:selected': selectedObject
  });
  
  
  
  
  function selectedObject() {
    var id = canvas.getActiveObject().get('id');
    alert("id: " + id);
  }
  
  function addArea(areaCode, areaID) {
    var labeledRectObj = new fabric.Labeledrect({
      width: 100,
      height: 50,
      left: 100,
      top: 100,
      label: areaCode,
      fill: '#ccc',
      htmlContent: 'test html',
      id: areaID
    });
    canvas.add(labeledRectObj);
    canvas.setActiveObject(labeledRectObj);
  }
  
  $("#addArea1").click(function() {
  
    addArea("A01", 1);
  });
  
  $("#addArea2").click(function() {
    addArea("A02", 2);
  });
  
  
  $("#reload").click(function() {
    var canvasJson = canvas.toJSON();
    alert(JSON.stringify(canvasJson));
    canvas.loadFromJSON(canvasJson, canvas.renderAll.bind(canvas));
    //the canvas is not getting rendered
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="button" id="addArea1" value="Area 1"&gt;
  &lt;input type="button" id="addArea2" value="Area 2"&gt;
  &lt;div id="canvas-container" style="overflow-x:scroll;overflow-y:scroll;"&gt;
    &lt;canvas id="c" height="400" width="300" style="border:1px solid #ccc;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;input type="button" id="reload" value="Reload Objects"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The error that I'm getting is "<em>Cannot read property 'async' of undefined</em>"</p>
  
  <p>Any help will be strongly appreciated.</p>