JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<div id="stage">
    <canvas id="c" width="640" height="480"></canvas>  
</div>

JavaScript

var canvas = new fabric.Canvas('c');


// set background
fabric.Image.fromURL('https://qstomizr.s3.amazonaws.com/11102-9LDAQLKA1585254870.5083.jpg', (img) => {
  canvas.setBackgroundImage(img, null, {
    originX: 'center',
    originY: 'center',
    top: canvas.getCenter().top,
    left: canvas.getCenter().left,
    stroke: 'black',
    strokeWidth: 1,
  });

  canvas.renderAll();
});


// set masking area
var area = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top,
  left: this.canvas.getCenter().left + 10,
  width: 250,
  height: 300,
  selectable: false,
  fill: 'transparent',
  absolutePositioned: true
});

canvas.add(area)


// set example rect
var rect = new fabric.Rect({
  originX: 'center',
  originY: 'center',
  top: this.canvas.getCenter().top + 50,
  left: this.canvas.getCenter().left,
  height: 100,
  width: 100,
  fill: 'pink',
  clipPath: area
});

canvas.add(rect)