JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

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 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.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 () {
    // resizes an object that has been scaled (e.g. by manipulating the handles), setting scale to 1 and recalculating bounding box where necessary
    switch (this.type) {
        case "ellipse":
            this.rx *= this.scaleX;
            this.ry *= this.scaleY;
            this.width = this.rx * 2;
            this.height = this.ry * 2;
            this.scaleX = 1;
            this.scaleY = 1;
            break;
        
        case "rect":
            this.width *= this.scaleX;
            this.height *= this.scaleY;
            this.scaleX = 1;
            this.scaleY = 1;
        default:
            break;
    }
}