title: fabric js load single objects to canvas from mysql database
body: <p>I have a canvas that lives on top of a video.  When a user pauses the video they are able to add fabricjs objects to the canvas.  When an object is added to the canvas it is saved to a table in a mysql database as JSON.</p>
  
  <p>When the  user clicks a button it will query the mysql database for records and return via ajax the objects for each record in an array. </p>
  
  <p>As it loops through this array I want fabricjs to render each object one at a time until all objects have been rendered.  </p>
  
  <p><strong>I have tried using :</strong></p>
  
  <pre><code>canvas.loadFromJSON(rData, canvas.renderAll.bind(canvas), function(o, object) {
    fabric.log(o, object);
  });
  </code></pre>
  
  <p>It will load all objects but clears the canvas before each load and will only display the last object.  </p>
  
  <p><strong>I have tried the example here:</strong>  </p>
  
  <p><a href="http://codepen.io/Kienz/pen/otyEz" rel="nofollow">http://codepen.io/Kienz/pen/otyEz</a> but cannot seem to get it to work for me.  I have also tried <a href="http://jsfiddle.net/Kienz/bvmkQ/" rel="nofollow">http://jsfiddle.net/Kienz/bvmkQ/</a> but cannot see what is wrong.</p>
  
  <p>So I have come to the experts!  I appreciate all and any help.  Thank you.</p>
  
  <p>Here is my table in mysql wth 2 records:</p>
  
  <pre><code>CREATE TABLE IF NOT EXISTS `telestrations` (
    `id_telestration` int(11) NOT NULL AUTO_INCREMENT,
    `object` longtext NOT NULL,
    PRIMARY KEY (`id_telestration`),
    UNIQUE KEY `id_telestration` (`id_telestration`)
  ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=65 ;
  
  --
  -- Dumping data for table `telestrations`
  --
  
  INSERT INTO `telestrations` (`id_telestration`, `object`) VALUES
  (63, '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":161.05,"top":359.29,"width":69.3,"height":20.97,"fill":"#e6977e","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"AAAAAA","fontSize":16,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{"0":{"1":{},"2":{},"3":{},"4":{},"5":{}}}}],"background":""}'),
  (64, '{"objects":[{"type":"i-text","originX":"left","originY":"top","left":463.68,"top":353.84,"width":69.3,"height":20.97,"fill":"#20f20e","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"BBBBBB","fontSize":16,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{"0":{"1":{},"2":{},"3":{},"4":{},"5":{}}}}],"background":""}');
  </code></pre>
  
  <p><strong>Here is my php file:</strong></p>
  
  <pre><code>$teles = Telestration::getTeleByVideo();
  
  $objArray = array();
  foreach($teles as $tele){
      $obj = $tele-&gt;getValueEncoded('object');
      $objArray[] = $obj;
  }
  echo json_encode($objArray);
  </code></pre>
  
  <p><strong>Here is my JavaScript:</strong></p>
  
  <pre><code>document.getElementById("get_json").onclick = function(ev) {    
    $.ajax({
      url: 'getTelestrations.php',
      data: dataString,
      type: 'POST',
      dataType:"json",
      success: function(data){
        for (var i = 0; i &lt; data.length; i++) {
          rData = data[i].replace(/&amp;quot;/g, '\"');
          //Do something
          canvas.loadFromJSON(rData, canvas.renderAll.bind(canvas), function(o, object) {
            fabric.log(o, object);
          }); 
        }
      }
    }); 
  }
  </code></pre>