JSFiddle - React, Tailwind, and code Playground

by solex16

HTML

<script src="https://github.com/downloads/kangax/fabric.js/0.9.15.min.js"></script>
<canvas id="canvas"></canvas>

CSS

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

JavaScript

var shapesSvg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240"><rect id="rect" x="5" y="50" width="100" height="100" style="fill: rgb(255,0,0);"></rect> <circle id="circle" cx="165" cy="100" r="50" style="fill: rgb(0,255,0);"/>    <polygon id="polygon" points="265,50  315,150  215,150" style="stroke: rgb(51,51,51); fill: rgb(204,204,204); stroke-width: 5;"/></svg>';

var canvas = new fabric.Canvas('canvas');

canvas.setHeight($(window).height());
canvas.setWidth($(window).width());


canvas.observe('object:selected', function(e) {
   console.log(e.target.getObjects());
});


var group = [];

fabric.loadSVGFromString(shapesSvg,function(objects,options) {

var loadedObjects = fabric.util.groupSVGElements(group);

     loadedObjects.hasControls = true;
     loadedObjects.hasBorders = true;
     loadedObjects.lockRotation = false;
     loadedObjects.lockMovementX = false;
     loadedObjects.lockMovementY = false;    
    
loadedObjects.set({
left: 200,
top: 200,
width:320,
height:240
});

canvas.add(loadedObjects);
canvas.renderAll();

},function(item, object) {

object.set('id',item.getAttribute('id'));
group.push(object);    

});