JSFiddle - React, Tailwind, and code Playground

by abhroy

HTML

<html>
<head>
	<title>Fabic Test</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.js"></script>
</head>
<body>
<div class="canvas-div">
	<canvas id="c" width="1300" height="1000" style="border:1px solid black"></canvas>
</div>
<script type="text/javascript">
</script>
</body>
</html>

JavaScript

/*
		X
		|
		|
------------------- Y
		|
		|		
*/

//Need to define Data Structures 
function init()
{
	var cvs = document.getElementById("c");
	var count = 0;
	//Here we need the size of the |||||scaled floor||||| to set on the canvas
	cvs.width = 1100;
	cvs.height = 600;
	canvas = new fabric.Canvas('c');
	var rect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 100,
    height: 100,
	});
	canvas.add(rect);
}
init();