JSFiddle - React, Tailwind, and code Playground

by kwicher

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.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: 300px;
	height: 300px;
	overflow: scroll;
	background-color: #EEE;

}

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


.mainCanvas{

	border:1px solid #ccc;
    top:500px;
    
}

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);
    
   
    });