title: How to add objects in group dynamically in fabric js
body: <p>1.I want to add objects dynamically in group, or cloning object dynamically.
  2.I have tried  but not working in looping.
  3.Want to make group of objects present over canvas (which is dragged by user over canvas)</p>
  
  <pre><code> &lt;script src="js/fabric.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;canvas id="canvas" class="canvas" &gt;&lt;/canvas&gt;
  
      &lt;style&gt;
      .canvas {
      border: 1px solid Black;
      width: 1100px;
      height: 1100px;
      }
  
      &lt;/style&gt;
  
       &lt;script&gt;
          var canvas = new fabric.Canvas('canvas');
     canvas.setWidth(1100);
    canvas.setHeight(1100);
  
  
  
  // clear canvas
    canvas.clear();
  
    // add red rectangl
    canvas.add(new fabric.Rect({
    width: 50, height: 50, left: 50, top: 50, fill: 'rgb(255,0,0)'
  }));
  
    canvas.add(new fabric.Rect({
    width: 50, height: 50, left: 110, top: 50, fill: 'rgb(255,0,0)'
    }));
    canvas.add(new fabric.Rect({
    width: 50, height: 50, left: 170, top: 50, fill: 'rgb(285,0,0)'
    }));
  
  
  //var clone = obj.clone();
  //alert(obj);
  
  items = canvas._objects;
  
  var group = new fabric.Group([
       // canvas.add(obj)
    canvas.items.clone()
  //  canvas.item(1).clone(),
  //  canvas.item(2).clone()
  ]);
  
  
  canvas.clear().renderAll();
  canvas.add(group);
  
  
  
  
      &lt;/script&gt;
  </code></pre>