Template for issues

HTML

<script src="https://cdn.jsdelivr.net/gh/fabricjs/fabric.js@vv6-alpha/dist/fabric.js"></script>
<button onclick="toGroup()">Group</button>
<button onclick="unGroup()">UnGroup</button>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

const circle = new fabric.Circle({
  left: 100,
  top: 50,
  radius: 50
});
const text = new fabric.Text('', {
  evented: false
});
const itext = new fabric.IText('Edit me\nfit-content layout', {
  left: 100,
  top: 150
});
const g = new fabric.Group([
  new fabric.Rect({
    top: 200,
    width: 50,
    height: 50,
    fill: 'red',
    opacity: 0.3
  }),
  circle,
  itext
], {
  backgroundColor: 'blue',
  interactive: true,
  subTargetCheck: true
  //objectCaching: false
});
canvas.add(
  text,
  g
);
g.clone().then(clone => {
  clone.item(2).set({
    text: 'Edit me\nclip path layout'
  });
  clone.set({
    backgroundColor: 'magenta',
    clipPath: new fabric.Circle({
      radius: 110,
      originX: 'center',
      originY: 'center', // left: 50, top: 150,
      // scaleX:0.6
    }),
    layout: 'clip-path'
  });
  canvas.add(clone);
});
g.clone().then(clone => {
  clone.item(2).set({
    text: 'Edit me\nabsolute positioned\nclip path layout'
  });
  clone.set({
    backgroundColor: '#0dcaf0',
    clipPath: new fabric.Circle({
      radius: 110,
      originX: 'center',
      originY: 'center',
      absolutePositioned: true,
      left: 50,
      top: 150,
      skewX: 20
    }),
    layout: 'clip-path',

  });
  canvas.insertAt(clone, 0);
});
canvas.on('after:render', () => {
  text.set('text', `circle is on screen? ${circle.isOnScreen()}`);
  text.dirty && canvas.requestRenderAll();
});

let group;

function toGroup() {
  const objects = canvas.getActiveObjects();
  canvas.discardActiveObject();
  group = new fabric.Group(objects, {interactive:true,subTargetCheck:true});
  canvas.add(group);
 ...