Load Multiple Images in for loop in Fabric Js not getting their position

Question

Guys please help in solving this issue. I store images in an array while retrieving those images on canvas using Fabric Js, I'm facing a problem. Images are loading but their positions are not accurate they come over each other and last image on which i made changes. All images come at that positions instead of their own position.

Each image has their own position which are stored in array. But its not working. I'm using for loop to retrieve them on canvas.

 var frontobj = new Image();
    for(var i=0;i<len;i++)
    {
      var x = frontarray[i].id;
      frontobj.src = DesignName[x];

      fabric.Image.fromURL(frontobj.src, function(frontobj)
        {
        frontobj.set('id',frontarray[i-1].id).set('num',frontarray[i-1].num).setTop(frontarray[i-1].top).setLeft(frontarray[i-1].left).
setAngle(frontarray[i-1].angle).set('flipX', frontarray[i-1].flipx).set('flipY', frontarray[i-1].flipy)
                                  .setScaleX(frontarray[i-1].scalex).setScaleY(frontarray[i-1].scaley);

               canvas.add(frontobj);
               canvas.renderAll();  
        });                 
     } 

I used i-1 because value of i inside fabric.Image.fromURL got 1 first time. I made alert and identified that if i have two images then it displays both of them but takes the positions of second image, don't know why.

Answer 1

This link helped me to solve my problem.

My mistake was that i was not using object details properly. Through this link I just bound the details in an object and used them. After executing loop each time value of i increase and then it take object from that position of my array and use its details. Let me show you my working code. I hope it will help someone else.

for (var i=0; i<frontarray.length;i++)
    {
                          var objRef = frontarray[i];


                              var url = objRef.url;
                              fabric.Image.fromURL(url, function(img) {
                                canvas.add(img).renderAll();
                              }, {
                                id: objRef.id,
                                num: objRef.num,
                                left: objRef.left,
                                top: objRef.top,
                                angle: objRef.angle,
                                scaleX: objRef.scalex,
                                scaleY: objRef.scaley,
                                flipX: objRef.flipx,
                                flipY: objRef.flipy,

                              }); 

    }