JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>


<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

<script>

  function resizeCanvas() {

    canvas.setDimensions({
    	width: $("#canvasContainer").width(),
    	height: $("#canvasContainer").height()
  	});

	}

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());

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

canvas.controlsAboveOverlay = true;

// Add canvas clip path
var clipPath = new fabric.Rect({ 
		left: 50,
		top: 50,
		width: 300,
		height: 300 });
	
canvas.clipPath = clipPath;

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 150,
  height: 150
});

rect.set({
  transparentCorners: false,
  rotatingPointOffset: 40,
  cornerColor: 'black',
  cornerStrokeColor: 'black',
  borderColor: 'black',
  cornerSize: 12,
  padding: 10,
  cornerStyle: 'circle',
  borderDashArray: [3, 3]
});

// "add" rectangle onto canvas
canvas.add(rect);

var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);

// Tracking resize windows event
window.addEventListener('resize', resizeCanvas, false);