JSFiddle - React, Tailwind, and code Playground

by Hooman Askari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-rc.1/fabric.min.js"></script>
<canvas id="canvas"></canvas>

CSS

body, html {
  margin: 0;
  padding: 0;
}

JavaScript

const canvas = new fabric.Canvas(document.getElementById('canvas'), {
	backgroundColor: '#ebebeb',
  width: window.innerWidth,
  height: window.innerHeight
});

const rect = '{"type":"rect","version":"4.0.0-rc.1","left":250,"top":250,"width":100,"height":100,"fill":"#fff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0,"originX":"center","originY":"center"}';

fabric.util.enlivenObjects([JSON.parse(rect)], (objects) => {
  canvas.add(objects[0]);
});