Fabric.js - fabric.Image.fromURL in a loop

https://groups.google.com/forum/#!topic/fabricjs/1fYkLS-S-Cc%5B1-25-false%5D

by Ashish Kasama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

CSS

canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

JavaScript

var srcImg = "http://fabricjs.com/lib/pug.jpg";
var person = {};
person.d = [{URL: srcImg, PosX: Math.random()*500, PosY: Math.random()*500},
             {URL: srcImg, PosX: Math.random()*500, PosY: Math.random()*500},
             {URL: srcImg, PosX: Math.random()*500, PosY: Math.random()*500},
             {URL: srcImg, PosX: Math.random()*500, PosY: Math.random()*500},
             {URL: srcImg, PosX: Math.random()*500, PosY: Math.random()*500}];

var canvas = new fabric.Canvas('c');
var i;
for (i = 0; i < person.d.length; i++)
{
  //var image = new Image();
  //image.src = person.d[i].URL;
  var URL = person.d[i].URL;
  var PosX = person.d[i].PosX;
  var PosY = person.d[i].PosY;
  
  fabric.Image.fromURL(URL, function (oImg) {
    //oImg.set('left', PosX).set('top',PosY);
    canvas.add(oImg);
    canvas.renderAll();
  }, {"left": PosX, "top": PosY, "scaleX": 0.25, "scaleY": 0.25});
}