JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js" integrity="sha512-T9uV3LxV54oKVYSwORGeHdJ1Ti0WcQvDjAaTvMS6+qfrI5ZRzwxfXVzr7fqodTjfZ6wtbreT5A+65ykwbp4DOw==" crossorigin="anonymous"></script>
</head>
<body>
<div>
<canvas id="ast"></canvas>
</div>
</body>
</html>

JavaScript

let canvas = new fabric.Canvas(
"ast",
   {
        width: 400,
        height: 400,
        selection: true,
        id: "ast",
        //selectionBorderColor: "green",
        backgroundColor: "#ffffff",
        preserveObjectStacking: true,
        uniScaleTransform: true,
        //cornerSize: 40,
        lockScalingFlip: true,
        controlsAboveOverlay: true,
        subTargetCheck: true,
        hoverCursor: "pointer",
        stateful: true,
      },
      null,
      "anonymous"
    );
    
   var Rect = new fabric.Rect({
    width: 250,
    height: 250,
    fixed: true,
    fill: "#000",
    scaleX: 1,
    scaleY: 1,
    top:0,
    left:0,
    maskname: "rect",
    absolutePositioned: true,
    stroke: "1",
    lockScalingFlip: true,
    lockUniScaling: true,
    minScaleLimit: 0.1,
  });

 canvas.add(Rect);

 function rectMask(canvas) {
 
  //Rect.viewportCenter();
  
  
  let pugImg = new Image();
  pugImg.crossOrigin = "anonymous";
  pugImg.src ="https://posterapplab.com/api/images/photos/ZaJprCvDjVA.png";

  //console.log(size.zoom);
  pugImg.onload = function (img) {
    let pug = new fabric.Image(pugImg, {
      crossOrigin: "anonymous",
      scaleX:0.3,
      scaleY:0.3,
      top: 20,
      left: 10,
      maskname: "rect",
      clipPath: Rect,
      clipTo: function (ctx) {
    	clipMyObject(this, ctx);
      },
    });
    pug.crossOrigin = "anonymous";
    pug.backgroundVpt = false;
    pug.setControlsVisibility({
      mt: false,
      mb: false,
    });
    canvas.add(pug);
    canvas.renderAll();
  };

}

 function clipMyObject(thisObj, ctx) {
  if (thisObj.clipPath) {
    ctx.save();
    if (thisObj.clipPath.fixed) {
      var retina = thisObj.canvas.getRetinaScaling();
      ctx.setTransform(retina, 0, 0, retina, 0, 0);
      // to handle zoom
      ctx.transform.apply(ctx, thisObj.canvas.viewportTransform);
      thisObj.clipPath.transform(ctx);
    }

    thisObj.clipPath._render(ctx);
    ctx.restore();
    ctx.clip();
    var x =...