JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<canvas id="c" width="750" height="400" style="border:1px solid #ccc"></canvas>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/6.6.1/fabric.mjs" integrity="sha512-CeIsOAsgJnmevfCi2C7Zsyy6bQKi43utIjdA87Q0ZY84oDqnI0uwfM9+bKiIkI75lUeI00WG/+uJzOmuHlesMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JavaScript

var canvas = new fabric.Canvas('c');
 
  var clipPath = new fabric.Circle({ radius: 70, top: -70, left: -70 });
  

  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ],{
    left: 170
    });
  group.clipPath = clipPath;
  
   var frame = new fabric.Rect({ width: 300,height:300,fill:'#FF6000' });
   // Uncomment below line to to see the issue.
   // After setting clipPath.clipPath as frame, it's not actually clipping.
   frame.clone((cloned) => {
    cloned.absolutePositioned = true;
    clipPath.clipPath - cloned
    canvas.add(frame)
    canvas.add(group);
  })