JSFiddle - React, Tailwind, and code Playground

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

JavaScript

var canvas = new fabric.Canvas("canvas",{
	preserveObjectStacking: true
});
fabric.Object.prototype.set({
originX: 'center',
originY: 'center'
});
var rect1 = new fabric.Rect({
  width: 150,
  height: 150,
  left: 30,
  top: 30,
  fill: 'green',
  strokeWidth: 0,
  inverted: true
});
//canvas.add(rect1);

var rect2 = new fabric.Rect({
  width: 150,
  height: 150,
  left: 10,
  top: 10,
  fill: 'red',
  strokeWidth: 0,
  clipPath: rect1,
  //inverted: true
});
canvas.add(rect2);

var rect3 = new fabric.Rect({
  width: 150,
  height: 150,
  left: 230,
  top: 140,
  fill: 'blue',
  strokeWidth: 0,
  clipPath: rect1,
  //inverted: true
});
canvas.add(rect3);