JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="320" height="240"></canvas>
<button id="draw-btn" type="button">Draw</button>
<button id="undo-btn" type="button">Undo</button>
<button id="redo-btn" type="button">Redo</button>
<button id="delete-btn" type="button">Delete</button>

JavaScript

/*
In Chrome: Shift-Ctrl-J for console.

Draw, move, resize, delete, rotate or flip objects.
Then play thru changes with redo / undo.
*/

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

var undoHist = [];
var redoHist = [];
var replayFlag = false; // set to true while undoing or redoing..
var selectedObject = []; // store selected object properties

var drawingMode = document.getElementById('draw-btn');
var myUndo = document.getElementById('undo-btn');
var myRedo = document.getElementById('redo-btn');
var deleteSelectedObject = document.getElementById('delete-btn');

setupCanvas();

// ----------
deleteSelectedObject.onclick = function()
{
    deleteSelected();
};
// ----------
// not really deleting, but hiding, since that
// allows us to use the same itemNums for objects.
function deleteSelected() {
    
var itemNums = []; // item numbers on the canvas

for (var i in canvas.getObjects()) {
 if (canvas.item(i).active === true ) {
   canvas.item(i).set({ selectable: false, visible: false });
   itemNums.push(i);
 }
}

redoHist = [];
undoHist.push({
   "action" : "remove",
   "itemNums": itemNums
});
canvas.deactivateAll();
canvas.renderAll();
}
// ----------
// save selected properties of the currently selected 
// object to selectedObject array so we can access previous
// properties should the object be modified by the user.
// I finally learned about stateful and hasObjectChanged,
// so will maybe use that one day. 
function onObjectSelected() {

  selectedObject = [];

  for (var i in canvas.getObjects()) {

    if (canvas.item(i).active === true) {

      // shft-ctrl-j to see item properties on click (chrome)
      console.log(canvas.item(i));
        
      // objects can be flipped, but not groups 
      var groupLeft = 0;
      var groupTop = 0;
      var groupScaleX = 1;
      var groupScaleY = 1;
      var groupAngle = 0;


      // if it's a group, add group coords also
      if (typeof canvas.item(i).group != "undefined") {
        var groupLeft =...