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

/*
Rotate disabled - not required.
In Chrome: Shift-Ctrl-J for console.

Selected group of objects or single objects
to see object properties.
*/

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

var undoHist = [];
var redoHist = [];
var replayFlag = false; // set to true while undoing or redoing..
var selectedObject = []; // clone selected object(s) to array

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 (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 the currently selected object(s) to this
// array so we can access previous properties should
// the object be modified by the user.
function onObjectSelected() {
    
selectedObject = [];
    
console.log("onObjectSelected: ");

for (i in canvas.getObjects()) {
 if (canvas.item(i).active === true ) {
  console.log(canvas.item(i));
  selectedObject.push({
   "itemNum"   : i,
   "svdObject" : fabric.util.object.clone(canvas.item(i))
  });
 }
}

};
// ----------
// add new object itemNums to the undo stack
// clear redo stack when new item added.
function onObjectAdded() {
    
var o = canvas.getObjects();
    
if (replayFlag === false) {
 undoHist.push({
  "action" : "add",
  "itemNums": [o.length - 1] 
 });
 redoHist = [];
}
    
};
// ----------
// when object is modified, save previous top, left and...