JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<canvas id="canvDraw" class="canvas"></canvas>

CSS

.canvas {
    border: 1px solid Black;
}

JavaScript

var gCanvas = new fabric.Canvas('canvDraw');
gCanvas.setWidth(500);
gCanvas.setHeight(500);

// add some shapes - these are examples, others should work too
var myRectangle = new fabric.Rect({
    left: 100,
    top: 100,
    fill: '#999999',
    width: 50,
    height: 50,
    strokeWidth: 1,
    stroke: '#000000'
});
gCanvas.add(myRectangle);

var thesePoints = [{
    x: -50,
    y: -25
}, {
    x: 50,
    y: -25
}, {
    x: 70,
    y: 25
}, {
    x: -70,
    y: 25
}];
var myPolygon = new fabric.Polygon(thesePoints, {
    top: 100,
    left: 250,
    fill: '#999999',
    stroke: '#000000',
    strokeWidth: 1,
});
gCanvas.add(myPolygon);

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

var myText = new fabric.Text("Some text", {
    top: 250,
    left: 250,
});
gCanvas.add(myText);


// set up a listener for the event where the object has been modified
gCanvas.observe('object:modified', 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 "circle":
            this.radius *= this.scaleX;
            this.scaleX = 1;
            this.scaleY = 1;
            break;
        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 "polygon":
        case "polyline":
            var points = this.get('points');
            for (var i = 0; i < points.length; i++) {
                var p = points[i];
                p.x...