JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
<div>
<img src="https://picsum.photos/id/237/300/150">
</div>
<canvas id="crop-canvas"></canvas>

CSS

img {

  position: absolute;

}

canvas {
  /* background-color: black; */
}

JavaScript

const canvasW = 300
const canvasH = 150

const fabricCanvas = new window.fabric.Canvas('crop-canvas')
fabricCanvas.setWidth(canvasW)
fabricCanvas.setHeight(canvasH)
fabricCanvas.hoverCursor = 'pointer'

const cropRect = new window.fabric.Rect({
  top: 0,
  left: 0,
  width: canvasW,
  height: canvasH,
  fill: 'red',
  strokeWidth: 0,
  lockRotation: true,
  lockScalingFlip: true,
  lockUniScaling: true,
  hasBorders: true,
  hasRotatingPoint: false,
  padding: -12,
  cornerColor: 'red',
  borderColor: 'white',
  cornerStroke: 10,
  borderScaleFactor: 2,
  cornerSize: 10,
  borderOpacityWhenMoving: 1,
})

cropRect.set('globalCompositeOperation', 'destination-out')

fabricCanvas.add(cropRect)
fabricCanvas.setActiveObject(cropRect)
fabricCanvas.requestRenderAll()