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);
gCanvas.observe('object:added', function (e) {
		    e.target._origStrokeWidth = e.target.strokeWidth;
		});
var text = new fabric.Text('test', {  fontSize: 30, top: 100, left : 100, fill : 'red', _origStrokeWidth: 3, strokeWidth: 3});
// 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',
    _origStrokeWidth: 3
});
var group = new fabric.Group([ myRectangle, text ], {borderColor: 'black', cornerColor: 'green', lockScalingFlip : true, _origStrokeWidth: 3, strokeWidth: 3});
gCanvas.add(group);

var thesePoints = [ {x:-50,y:-25},{x:50,y:-25},{x:70,y:25},{x:-70,y:25} ];


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


gCanvas.on('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 () {
  if  (this.type !=='group') {
    this.strokeWidth = this._origStrokeWidth / Math.max(this.scaleX, this.scaleY);
  }
  else {
    this._objects.forEach( function(obj){
      console.log(obj);
      obj.strokeWidth = obj._origStrokeWidth / Math.max(obj.group.scaleX, obj.group.scaleY);
    });
  }
}