JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<script src="http://makemydesign.com/demo/js/js/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 rect</button>
			</p>
	</body>
</html>

JavaScript

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


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

});