JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<body>

<canvas id="canvas1" width=300 height=300></canvas>

</body>

JavaScript

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


            var rects=new fabric.Rect({
              fill: 'red',
              width: 200,
              originX: 'center',
              originY: 'center',
              height: 200,
        		});
            
            var recta=new fabric.Rect({
              fill: 'red',
              width: 200,
              originX: 'center',
              originY: 'center',
              height: 200,
        		});

var rect = new fabric.Group([recta, rects], {
objectCaching: false,
              left: 100,
              top: 100,
                          originX: 'center',
                          originY: 'center',
                         width: 0,
height: 0,
});

        canvas.add(rect)

        
        rect.animate('width',200, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic,
        });

        rect.animate('height',200, {
            onChange:canvas.renderAll.bind(canvas),
            duration: 1000,
            easing: fabric.util.ease.easeOutElastic
        });