JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//fabricjs.com/lib/fabric.js" ></script>
<script src="//code.jquery.com/jquery-3.1.1.min.js" ></script>

<div id="myCanvasWrapper">
  <canvas id="myCanvas" width="400" height="400"></canvas>
</div>

CSS

canvas {
  border: 1px solid #333333;
}

JavaScript

function addRect(){
					 //console.log(c);
					 var rect = new fabric.Rect({
						left: 100,
						top: 100,
						fill: '#ff00ff',
						width: 100,
						strokeWidth: 2,
						stroke: "#FF0000",
						height: 100,
					  });
					  canvas.add(rect);
					  canvas.renderAll();
					  
				  }
function addRect1(){
					 //console.log(c);
					 var rect = new fabric.Rect({
						left: 100,
						top: 100,
						fill: '#ffff00',
						width: 100,
						strokeWidth: 2,
						stroke: "#FF0000",
						height: 100,
            selectable: false,
            evented: false
					  });
					  canvas.add(rect);
					  canvas.renderAll();
					  
				  }

var canvas= new fabric.Canvas('myCanvas');
addRect();
addRect1();