JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

// loadFromJSON - CallBack Fixing

var canvas = new fabric.Canvas('canvas');
var jSON = '{"objects":[{"type":"image","originX":"center","originY":"center","left":100,"top":150,"width":150,"height":150,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://i.imgur.com/WlVVX.jpg","filters":[]}],"background":""}';

function MYCALLBACK() {
  console.clear();
  canvas.renderAll();
  console.log(canvas.getObjects());
}

canvas.loadFromJSON(jSON, MYCALLBACK, function(o, object) {
  canvas.setActiveObject(object);
});