JSFiddle - React, Tailwind, and code Playground

by Shakti Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.2/fabric.min.js"></script>
<span style="float:left" class="canvas-span">
  <canvas id="c" width="500" height="500"></canvas>
</span>

JavaScript

var canvas = window._canvas = new fabric.Canvas('c', {
  width: 500,
  height: 500
});


var clipPath = new fabric.Rect({
  width: 500,
  height: 250,
  top: 0,
  left: 0,
  absolutePositioned: true
});

var groupObject = 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 })
]);
groupObject.clipPath = clipPath;
canvas.add(groupObject);
canvas.renderAll();

groupObject.clone(function(clone) {    
  console.log(clone.toObject());
});