JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400" style="border:solid 1px #000"></canvas> 
<br/>

<button type="button" id="undo" >Undo</button>
<button type="button" id="redo" disabled>Redo</button>

JavaScript

var canvasDemo = (function(){
  var _canvasObject = new fabric.Canvas('canvas',{backgroundColor : "#f5deb3"});
	var _config = {
		canvasState             : [],
		currentStateIndex       : -1,
		undoStatus              : false,
		redoStatus              : false,
		undoFinishedStatus      : 1,
		redoFinishedStatus      : 1,
    undoButton              : document.getElementById('undo'),
		redoButton              : document.getElementById('redo'),
	};
	_canvasObject.on(
		'object:modified', function(){
	  		updateCanvasState();
		}
	);
  
  _canvasObject.on(
		'object:added', function(){
	  		updateCanvasState();
		}
	);
  
  var addObject = function(){
     var rect = new fabric.Rect({
			left   : 100,
			top    : 100,
			fill   : 'red',
			width  : 200,
			height : 200
    });
		_canvasObject.add(rect);
		_canvasObject.setActiveObject(rect);
    _canvasObject.renderAll();
  }

	var updateCanvasState = function() {
		if((_config.undoStatus == false && _config.redoStatus == false)){
			var jsonData        = _canvasObject.toJSON();
			var canvasAsJson        = JSON.stringify(jsonData);
			if(_config.currentStateIndex < _config.canvasState.length-1){
				var indexToBeInserted                  = _config.currentStateIndex+1;
				_config.canvasState[indexToBeInserted] = canvasAsJson;
				var numberOfElementsToRetain           = indexToBeInserted+1;
				_config.canvasState                    = _config.canvasState.splice(0,numberOfElementsToRetain);
			}else{
	    	_config.canvasState.push(canvasAsJson);
			}
	    _config.currentStateIndex = _config.canvasState.length-1;
      if((_config.currentStateIndex == _config.canvasState.length-1) && _config.currentStateIndex != -1){
        _config.redoButton.disabled= "disabled";
      }
		}
	}

 
	var undo = function() {
		if(_config.undoFinishedStatus){
			if(_config.currentStateIndex == -1){
	    	_config.undoStatus = false;
			}
			else{
		    if (_config.canvasState.length >= 1) {
        	_config.undoFinishedStatus = 0;
		  ...