JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id = "canvas" height='400' width='500'></canvas>

CSS

#canvas{
  border:2px solid black;
}

JavaScript

var canvas = new fabric.Canvas(document.getElementById('canvas'));
console.log(JSON.stringify(canvas)); // '{"objects":[],"background":""}'

canvas.add(new fabric.Rect({
  left: 10,
  top: 10,
  height: 50,
  width: 50,
  fill: 'green',
 	stroke:'black'
}));
canvas.renderAll();

console.log(JSON.stringify(canvas));
console.log(canvas.toObject());//logs canvas as an object
console.log(canvas.toSVG());//logs the SVG representation of canvas
//{"objects":[{"type":"rect","originX":"left","originY":"top","left":50,"top":50,"width":30,"height":30,"fill":"green","stroke":"black","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}