multiple images in a loop fabricjs

Question

I have stripped back my Fiddle to show my issue.

I have a Rectagle that I am looping so it gives a different name with multiple instances. I can add and remove the rectangles fine. My issue is that I am replacing this rectangle with an image and I can get it to loop ok, but it will only remove 1 image and not them all. I think I am doing something wrong with the name, but i can not see the wood through the trees.

JSFiddle

var canvas = new fabric.Canvas('c', { selection: false });
var land = [];
var turret = [];
var wh=[];
var op=[];

//////////////////////////////////////////////////////////////////
// Outpost Level Dropmenu Select
$(document).ready(function () {$('#method').change(
function () {
   var method = $('option:selected').val();

                            if (this.value == "0") {            
            for (var i=0; i<96; i++){
            canvas.remove(land[i]);
      canvas.remove(turret[i]);
      canvas.remove(wh[i]);
      canvas.remove(op[i]);
};

}                       else if (this.value == "1") { 
//Clear All
            for (var i=0; i<96; i++){
            canvas.remove(land[i]);
      canvas.remove(turret[i]); 
      canvas.remove(wh[i]);
};
//Add Buildings
      for (var i=0; i<40; i++){
            land[i] = new fabric.Rect({
        fill: 'green',left: 25,top: 25,width: 25,height: 25,    
        perPixelTargetFind: true,hasBorders: false,hasControls:false, hasRotatingPoint: false,
});
            canvas.add(land[i])
};
            for (var i=0; i<6; i++){
            turret[i] = new fabric.Rect({
        fill: 'brown',left: 75,top: 25,width: 15,height: 15,    
        perPixelTargetFind: true,hasBorders: false,hasControls: false,hasRotatingPoint: false,
});
            canvas.add(turret[i])
};

            for (var i=0; i<3; i++){
            fabric.Image.fromURL('http://www.ahoymearty.co.uk/baseplanner2/images/buildings/warehouse.png', function(myImgwh) {wh[i] = myImgwh.set({ left: 25, top: 75 ,width:25,height:25, hasControls: false, hasRoatatingPoint: false,stroke: 'blue',strokeWidth: 1,
});
            canvas.add(wh[i]); 
});
};

}

});
});

score 0 · Answer 1 · edited May 23 '17 at 12:16

if it's acceptable to clear the whole canvas then this you can use the context -fiddle here https://fiddle.jshell.net/2xozu3wk/ as discussed in this query How to undraw, hide, remove, or delete an image from an html canvas? I think all but one of your images is being committed to the canvas and images paint pixels in a manner that's not so easy to clean up. Alternatively you can blank the canvas and reinstate elements you wish to retain but be prepared for a flicker?

var canvas = new fabric.Canvas('c', { selection: false });

var context = canvas.getContext('2d');

.
.
.

if (this.value == "0") {            
      context.clearRect(0, 0, canvas.width, canvas.height);     
}

don't know if that helps

i cant blank the canvas as other elements need it. this fiddle is to show what i have done wrong... — Wayne, Sep 14 '16 at 05:46

score 0 · Accepted Answer · answered Sep 15 '16 at 11:07

0

All 3 of your images are added async with a reference to i and the reference to i is 3 when all images are added. if you look at your 'wh' array you have a bunch of undefineds and then only 1 object added to the array. that is why you can only delete one object.

this JSFiddle just gets a new id in the callback which sets the array up correctly and then they can be deleted since you will now have all the proper references.

answered Sep 15 '16 at 11:07

StefanHayden

3,569
1
31
38

ty for this. i also charged the var i =0 to let i=o and it worked – Wayne Sep 16 '16 at 16:39

multiple images in a loop fabricjs

2 Answers2