JSFiddle - React, Tailwind, and code Playground

by MULLAINATHAN MANICKAM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
<br />

<!-- Undo / Redo Button -->
<button type="button" id="addtext" class="btn"> Add Text </button>
<button type="button" id="addrect" class="btn"> Add Rect </button>
<button type="button" id="undo-canvas" disabled="disabled" class="btn"> Undo </button>
<button type="button" id="redo-canvas" disabled="disabled" class="btn"> Redo </button>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

// Canvas Object Redo, Undo

var objectState, objectUndo = [], objectRedo = [];
var canvas, text, rect;

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

$(document).on('click', "#addtext", function(e) {
  e.preventDefault();
  AddText();
});

$(document).on('click', "#addrect", function(e) {
  e.preventDefault();
  AddRect();
});

function AddText() {
  text = new fabric.Text('Sample', {
    color: 'black',
    left: 10,
    right: 10,
    top: 25,
    stroke: 'red',
    strokeWidth: 1,
    transparentCorners: true,
  });

  canvas.add(text);
  saveObjectState();
  canvas.setActiveObject(text);
}

function AddRect() {
  rect = new fabric.Rect({
    left: 10,
    right: 10,
    top: 25,
    fill: 'red',
    width: 100,
    height: 100,
  });

  canvas.add(rect);
  saveObjectState();
  canvas.setActiveObject(rect);
}

canvas.observe('object:modified', function(e) {
  saveObjectState();
});

function saveObjectState() {
  objectRedo = []; // Empty Redo Array
  $('#redo-canvas').prop('disabled', true);
  if (objectState) {
    objectUndo.push(objectState);
    $('#undo-canvas').prop('disabled', false);
  }
  objectState = canvas.toJSON();
}

$(document).on('click', "#undo-canvas", function(e) {
  e.preventDefault();
  UndoRedo(objectUndo, objectRedo, '#redo-canvas', this);
});

$(document).on('click', "#redo-canvas", function(e) {
  e.preventDefault();
  UndoRedo(objectRedo, objectUndo, '#undo-canvas', this);
});

function UndoRedo(operation1, operation2, On, Off) {
  operation2.push(objectState);
  objectState = operation1.pop();
  var btnEnable = $(On);
  var btnDisable = $(Off);
  $(On).prop('disabled', true);
  $(Off).prop('disabled', true);
  canvas.clear();
  canvas.loadFromJSON(objectState, canvas.renderAll.bind(canvas), function(o, object) {
    canvas.setActiveObject(object);
    canvas.renderAll();
    $(On).prop('disabled', false);
    if (operation1.length) {
      $(Off).prop('disabled', false);
    }
  });
}