Fabricjs repeat

Question

I have been learning fabricJS and because I am learning it I have created 90 rectangles individually. Code below shows 2 of the 90.

    var land1 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

var land2 = new fabric.Rect({
    fill: 'green',
    left: 725,
    top: 225,
    width: 25,
    height: 25,    
    perPixelTargetFind: true,
    hasBorders: true, 
    hasControls: false,
    hasRotatingPoint: false,
});

and using canvas.remove(land1,land2 or canvas.add(land1,land2 depending on a drop menu selection.

I have tried googling how to repeat 1 rect 90 times so I only have to have 1 land. But I did try this which didn't work (maybe because I wrote it wrong).

    for (var i = 0; i < 91; i++) {
var land + i = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

Can anyone point me in the right direction to accomplish this and do the canvas.add also. My fiddle JSfiddle

Answer 1

You can use javascript array to do that e.g.

var land = [];
for (var i = 0; i < 91; i++) {
var land[i] = new fabric.Rect({
        fill: 'green',
        left: 725,
        top: 225,
        width: 25,
        height: 25,    
        perPixelTargetFind: true,
        hasBorders: true, 
        hasControls: false,
        hasRotatingPoint: false,
    });

}