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></tr></table>
</div>

<br>
     <img src="" id="caseimage2"width="40px">
    
		<p>
		<button id="add">add image</button>
			</p>
	</body>
</html>

JavaScript

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


window.setInterval(function(){

    
    
    
    var dataURL = canvas.toDataURL({
  format: 'png',
  quality: 0.3
});
    
   $("#caseimage2").attr("src", dataURL);
   canvas.renderAll();  
    
    
}, 500);

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

    var rectangle = new fabric.Rect({
    left:100,
    top: 100,
    fill: '#0000FF',
    hasBorders: true,
    width: 200,
    height: 200,
    opacity: 1,
  });

canvas.add(rectangle);

});