title: How do I make all objects on a FabricJS canvas active but as a group?
body: <p>I'm trying to make it so whenever a button is clicked, all objects on the canvas are selected and put into a group so they're all manipulated together. I found a good example of the grouping and ungrouping of objects that almost works the way I need, however it requires the user to select the objects they want when I want all objects on the canvas to be grouped/ungrouped.</p>
  
  <p>The example that I found that I was modifying: <a href="http://jsfiddle.net/softvar/NuE78/1/" rel="nofollow noreferrer">http://jsfiddle.net/softvar/NuE78/1/</a></p>
  
  <p>My modified example: <a href="http://jsfiddle.net/NuE78/68/" rel="nofollow noreferrer">http://jsfiddle.net/NuE78/68/</a></p>
  
  <pre><code>var canvas = new fabric.Canvas('paper', {
    isDrawingMode: true
  });
  $("#select").click(function() {
    canvas.isDrawingMode = false;
  });
  $("#draw").click(function() {
    canvas.isDrawingMode = true;
  });
  $("#group").on('click', function() {
      var group = new fabric.Group();
  
    for(var i = 0; i &lt; canvas.getObjects().length; i++) {
      group.addWithUpdate(canvas.getObjects()[i]);
    }
      canvas.setActiveGroup(group);
    canvas.renderAll();
    var activegroup = canvas.getActiveGroup();
    activegroup.clone(function(newgroup) {
      canvas.discardActiveGroup();
      canvas.getObjects().forEach(function(object) {
        canvas.remove(object);
      });
      canvas.add(newgroup);
  
    });
  });
  
  $("#ungroup").click(function() {
    var obj = canvas.getObjects()[0];
    if (obj.type == "group") {
      var items = obj._objects;
      obj._restoreObjectsState();
      canvas.remove(obj);
      for (var i = 0; i &lt; items.length; i++) {
        canvas.add(items[i]);
        canvas.item(canvas.size() - 1).hasControls = true;
      }
      canvas.renderAll();
    }
  });
  </code></pre>