JSFiddle - React, Tailwind, and code Playground

by thobn24h

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js" integrity="sha512-XcwgBTqf2CXR/nsswCV1e0j9CjXo87APyBsATK2/l7MvTpcIG0QYKA87v5KIJ4RS6ytArv2pWD6UcRorKhYp1A==" crossorigin="anonymous"></script>
    
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

CSS

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

JavaScript

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

// create a clipping path
var rectClippingPath = new fabric.Rect({
  top: 100,
  left: 100,
  width: 200,
  height: 200,
  fill: 'red',
  absolutePositioned: true
});

// create image
var newImage = new fabric.Image();
newImage.crossOrigin = 'anonymous';
newImage.clipPath = rectClippingPath;
canvas.add(newImage);

newImage.setSrc('http://fabricjs.com/assets/pug_small.jpg', (imageObject) => {
  newImage.set({ left: 50, top: 50});
  canvas.setActiveObject(newImage);
  newImage.setCoords();
  canvas.requestRenderAll();
}, {crossOrigin: 'anonymous'})