JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<div style="margin-left:50px" style="width: 600px; height: 600px; position: relative; -webkit-user-select: none; ">
<table><tr><td>
<canvas id="batman" width="400" height="250" style="border:dotted;left: 0px; top: 0px; -webkit-user-select: none;cursor: default;"></canvas>
</td><td>
<canvas id="batman1" width="250" height="400" style="border:dotted;left: 0px; top: 0px; -webkit-user-select: none;cursor: default;"></canvas>
</td></tr></table>
</div>
		<p>
		<button id="add">add image</button>
			</p>
	</body>
</html>

JavaScript

var canvas = new fabric.Canvas('batman',{backgroundColor : "#cccccc"});
var canvas2 = new fabric.Canvas('batman1',{backgroundColor : "#FF971E"});


$('#add').click(function() {

fabric.Image.fromURL("http://amazecase.com/us/media/images/grayscale.jpg", function(oImg) {
    oImg.id='infozaddImage';
	canvas.add(oImg);
    canvas.centerObjectH(oImg).centerObjectV(oImg);
    oImg.setCoords();
    canvas.renderAll();
    
});


fabric.Image.fromURL("http://amazecase.com/us/media/images/grayscale.jpg", function(oImg) {
    oImg.id='infozaddImage1';
	canvas2.add(oImg);
    canvas2.centerObjectH(oImg).centerObjectV(oImg);
    oImg.setAngle(90);
    oImg.transformMatrix = [1, 0.4, -0.6, 0.6, 70, 70];
    centeredRotation = true;
    oImg.setCoords();
    canvas2.renderAll();
    
});




});