JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<canvas id="c"></canvas>

CSS

body { background: gray; padding: 0; margin: 0; }
canvas { position: absolute; }

JavaScript

var resize = function () {
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    canvas.setWidth(width);
    canvas.setHeight(height);
};

var canvas = new fabric.Canvas('c');
//var canvas = new fabric.StaticCanvas('c');

resize();

window.addEventListener('resize', resize);

var text = new fabric.Text(':', {
    fontFamily: /*'Roboto-Thin'*/ 'TRS Million',
    fontSize: 209,
    lineHeight: 1,
    left: -50,
    top: 0,
    originX: 'left',
    originY: 'top',
    textAlign: 'center'
});

var circle = new fabric.Circle({
    radius: 50,
    fill: 'red',
    left: 0,
    top: 0,
    originX: 'left',
    originY: 'top',
});

var group = new fabric.Group([text, circle], {
    left: 100,
    top: 100,
    originX: 'left',
    originY: 'top',
    originX: 'left',
    originY: 'top',
});
group.lockRotation = true;

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 250,
    top: 350,
    originX: 'left',
    originY: 'top',
});
rect.lockRotation = true;

var editGroup = null;
var editObjects = null;

var ungroup = function (group) {
    editGroup = group;
    editObjects = group.getObjects();
    
    canvas.forEachObject(function (object) {
        object.selectable = false;
    });
    canvas.discardActiveObject();
    
    group.setVisible(false);
    canvas.renderAll();
    
    var x = group.getLeft();
    var y = group.getTop();
    
    group.forEachObject(function (object) {
        console.log(object.getLeft() + x, object.getTop() + y);
        
        object.setLeft(object.getLeft() + x);
        object.setTop(object.getTop() + y);
        canvas.add(object);
    });
};

var regroup = function (objects) {
    
    editGroup = null;
    editObjects = null;
};

window.addEventListener('keydown', function (e) {
    //circle.setLeft(circle.getLeft() + 10);
    //canvas.renderAll();
    
    if (e.keyCode === 13) {
        var object = canvas.getActiveObject();
        if (object && object.type === 'group') {
     ...