JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas id="c"></canvas>
    <script src="src/index2.js"></script>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

#c {
  width: 400px;
  height: 300px;
  border: 1px solid #999;
}

JavaScript

// Subclass (circle which exceeds it's dimensions)
  const CustomObject = fabric.util.createClass(fabric.Object, {
    initialize(opts) {
      this.callSuper("initialize", opts);
    },
    
    exceed: 20,

    _render(ctx) {
      ctx.beginPath();
      ctx.arc(0, 0, this.height / 2 + this.exceed, 0, 2 * Math.PI);
      ctx.fillStyle = "rgba(255, 128, 0, 0.5)";
      ctx.fill();
    },
    
    _getNonTransformedDimensions: function() {
      var strokeWidth = this.strokeWidth,
          w = this.width + this.exceed * 2 + strokeWidth,
          h = this.height  + this.exceed * 2+ strokeWidth;
      return { x: w, y: h };
    },
  });

  // Rect to visualise the clippath
  const obj = new CustomObject({
    left: 150,
    top: 100,
    width: 100,
    height: 100,
  });
  
  // Create canvas
  const canvas = new fabric.Canvas("c", {
    width: 400,
    height: 300,
  });  


  // Instance of subclass (which is clipped)
  canvas.add(obj);
  
  // Activate object
  canvas.setActiveObject(obj);