JSFiddle - React, Tailwind, and code Playground

by heldersepu

HTML

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

JavaScript

var canvas = new fabric.Canvas('ex8');
  canvas.controlsAboveOverlay = true;
  var clipPath = new fabric.Rect({
    width: 200,
    height: 100,
    fill: 'red',
    top: 100,
    left: 100
  });


  canvas.setOverlayImage(
    "https://i.ibb.co/88QkSMC/crew-front.png",
    canvas.renderAll.bind(canvas), {}
  );

  var group = new fabric.Group([
    new fabric.Rect({width: 100,height: 100,fill: 'red',globalCompositeOperation: 'xor'}),
    new fabric.Rect({width: 100,height: 100,fill: 'blue',top: 100}),
    new fabric.Rect({width: 100,height: 100,fill: 'green',left: 100,top: 100})
  ]);

  //canvas.clipPath = clipPath;
  canvas.add(group);