JSFiddle - React, Tailwind, and code Playground

by uemon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<html>
  <body>
      <canvas id="canvas" width="500px" height="500px"></canvas>
  </body>
</html>

JavaScript

(function() {
	const canvas = new fabric.Canvas('canvas')
  const rect = new fabric.Rect({
  	width: 100,
    height: 100,
    top: 0,
    left: 0,
    strokeWidth: 0,
  })
  const clipPath = new fabric.Circle({
  	radius: 50,
    top: -50,
    left: -50
  })
  rect.clipPath = clipPath
  
  canvas.add(rect)
})();