title: Unable to ungroup with Fabric JS
body: <p>Kind of new to FabricJS but looks like I'm either seriously messing things up or it's not possible to ungroup like I need it to do.</p>
  
  <p>Created a Fiddle right here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Init canvas
  var canvas = new fabric.Canvas('c');
  
  // Create array of circles
  
  var circlesCollection = [];
  
  for (i = 0; i &lt; 10; i++) {
    var circle = new fabric.Circle({
      radius: 10,
      fill: 'red',
      left: 25 * i,
      originX: "left"
    });
    circlesCollection.push(circle);
  }
  
  // Create group and add the group to the canvas
  var circleGroup = new fabric.Group(circlesCollection, {
    left: 100,
    top: 100
  });
  
  canvas.add(circleGroup);
  
  function unGroup() {
    //Ungroup and add back to canvas
    var items = circleGroup.getObjects();
    canvas.remove(circleGroup);
  
    var width = circleGroup.getWidth();
    var height = circleGroup.getHeight();
  
    for (var i = 0; i &lt; items.length; i++) {
      var left = circleGroup.getLeft() + items[i].getLeft() + (width / 2);
      var top = circleGroup.getTop() + items[i].getTop() + (height / 2);
      items[i].setLeft(left);
      items[i].setTop(top);
      items[i].hasControls = true;
      canvas.add(items[i]);
    }
  
    canvas.renderAll();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    border: 1px solid #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"&gt;&lt;/script&gt;
  &lt;button onclick="unGroup()"&gt;Ungroup now&lt;/button&gt;
  &lt;canvas id="c" width="600" height="600"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>External link: <a href="https://jsfiddle.net/WillemStaels/w9j3qwg0/3/" rel="nofollow noreferrer">https://jsfiddle.net/WillemStaels/w9j3qwg0/3/</a></p>
  
  <p>What the Fiddle does:</p>
  
  <ul>
  <li>Creates new canvas + init FabricJS</li>
  <li>Adds a group with 10 circle objects</li>
  <li>Gets items from group (the 10 circles) and adds them to the canvas</li>
  <li>Remove group</li>
  </ul>
  
  <p>= actually a basic ungrouping function</p>
  
  <p>Now what happens is that the objects after added back to the canvas without a group are not showing controls when selected AND after deselecting they become invisible on the canvas. After resizing (handles are there but not visible) it seems to fix the problem.</p>
  
  <p>Been breaking my head over this over the last few hours so any feedback or help would be welcome!</p>