JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.makemydesign.com/demo/js/js/jquery-1.8.3.min.js"></script>
<div style="margin-left:50px" style="width: 600px; height: 600px; position: relative; -webkit-user-select: none; ">
<div id="fashow">
<canvas id="batman" width="400" height="250" style="border:dotted;left: 0px; top: 0px; -webkit-user-select: none;cursor: default;"></canvas>
</div>
<div id="fashow1" >
<canvas id="batman1" width="400" height="250" style="border:dotted;left: 0px; top: 0px; -webkit-user-select: none;cursor: default;"></canvas>
</div>

<div id="fashow2" >
<canvas id="batman2" width="400" height="250" style="border:dotted;left: 0px; top: 0px; -webkit-user-select: none;cursor: default;"></canvas>
</div>
</div>
		<p>
			<button id="button">first</button><button id="button">second</button><button id="button">third</button><button id="add">add rect</button>
			</p>


<div id="imageDimension"></div>
	</body>
</html>

JavaScript

(function(global) {
  
  "use strict";

  function pad(str, length) {
    while (str.length < length) {
      str = '0' + str;
    }
    return str;
   };
   
 if (/(iPhone|iPod|iPad)/i.test(navigator.userAgent)) {
    fabric.Object.prototype.cornersize = 30;
  }
   
var canvas1 = new fabric.Canvas('batman',{backgroundColor : "#cccccc"});
var canvas2 = new fabric.Canvas('batman1',{backgroundColor : "#FF971E"});
var canvas3 = new fabric.Canvas('batman2',{backgroundColor : "#ffffff"});
//var canvas=canvas2;
    
        
//var tic=1;
//if(tic==1){
//    var canvas=canvas1;
//}
$('#button').click(function() {
    tic=2;
    if ($(this).text() == "first") {
       // $(this).text("second");
        canvas = canvas1;                  
        $('#fashow').show();
        $('#fashow1').show();
        $('#fashow2').show();
        canvas.calcOffset();
    }else if ($(this).text() == "second") {
       // $(this).text("first");
        canvas = canvas2;
        $('#fashow1').show();
        $('#fashow').show();
         $('#fashow2').show();
        canvas.calcOffset();
    }
    else  {
       // $(this).text("first");
        canvas = canvas3;
        $('#fashow1').show();
        $('#fashow').show();
         $('#fashow2').show();
        canvas.calcOffset();
    }
});
              

$('#add').click(function() {
var rect = new fabric.Rect({
                           left: 100,
                           top: 100,
                           fill: 'red',
                           width: 20,
                           height: 20,
                           angle: 45
                           });
canvas.add(rect);
});                   

    
    

function log(message, where) {
 var objArray = canvas.getObjects();
var mystring="";
var textno=1;
for (var j = 0; j < objArray.length; j++) {
  mystring +=parseInt(objArray[j].width*objArray[j].scaleX)+"<br>";
} 

$('#imageDimension').html(mystring);
}
function observe(eventName) {
    canvas.on(eventName,...