JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvDraw"></canvas>

JavaScript

var gCanvas = new fabric.Canvas('canvDraw');
gCanvas.setWidth(700);
gCanvas.setHeight(700);
var text = new fabric.Text('test', {  fontSize: 30, top: 100, left : 100, fill : 'red'});
// add some shapes - these are examples, others should work too
var myRectangle = new fabric.Rect({
	left: 100,
	top: 100,
	fill: '#999999',
	width: 120,
	height: 120,
    strokeWidth: 3,
    fill: '',
    stroke: '#000000'
});
var group = new fabric.Group([ myRectangle, text ], {borderColor: 'black', cornerColor: 'green', lockScalingFlip : true});
gCanvas.add(group);



var myRectangle2= new fabric.Rect({
	left: 200,
	top: 200,
	fill: '#999999',
	width: 120,
	height: 120,
    strokeWidth: 3,
    fill: '',
    stroke: '#000000'
});
gCanvas.add(myRectangle2);


var myEllipse = new fabric.Ellipse({
    top: 250,
    left: 100,
    rx: 75,
    ry: 50,
    fill: '',
    stroke: '#000000',
    strokeWidth: 3
});
gCanvas.add(myEllipse);

gCanvas.observe('object:scaling', function (e) {
		    e.target.resizeToScale();
});

// customise fabric.Object with a method to resize rather than just scale after tranformation
fabric.Object.prototype.resizeToScale = function () {
    handleObjectResize(this);
}


handleObjectResize = function(obj, scaleX, scaleY) {
    switch (obj.type) {
        case "ellipse":
            obj.rx *= scaleX ? scaleX : obj.scaleX;
            obj.ry *= scaleY ? scaleY : obj.scaleY;
            obj.width = obj.rx * 2;
            obj.height = obj.ry * 2;
            obj.scaleX = 1;
            obj.scaleY = 1;
            break;
        
        case "rect":
            obj.width *= scaleX ? scaleX : obj.scaleX;
            obj.height *= scaleY ? scaleY : obj.scaleY;
            obj.scaleX = 1;
            obj.scaleY = 1;
            break;
            
        case "group":
          	console.log("group", obj);
          obj._objects.forEach( function(child){
          	console.log(child);
            //j.strokeWidth = obj._origStrokeWidth / Math.max(obj.group.scaleX,...