JSFiddle - React, Tailwind, and code Playground

by kwicher

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://raw.github.com/kwicher/fabric.js/master/dist/all.js"></script>
<div class="paper">
<div class="figureEditor" id="test">
	<canvas class="mainCanvas" width="300" height="270" id="c"></canvas></div>
</div>

CSS

.paper{
	position: absolute;
	width: 200px;
	height: 200px;
	overflow: scroll;
	background-color: #EEE;

}

.figureEditor{
	position: absolute;
	width: 300px;
	height: 300px;
	background-color: #AAA;
}

.handle {
	width: 100%;
	height: 30px;
	top: 0px;
	left: 0px;
	background-color: #1AA;
}
.mainCanvas{

	border:1px solid #ccc
}

JavaScript

$('document').ready(function(){
    
    var canvas = new fabric.Canvas("c",{
            backgroundColor: 'rgb(150,50,50)',
            });
    var rect = new fabric.Rect({
              left: 100,
              top: 100,
              fill: 'red',
              width: 20,
              height: 20,
              angle: 45
            });

    canvas.add(rect);
    
    
    });