JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<script src=http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js></script>
<canvas id="c" width="400" height="200"></canvas>
<br>
<br>
<input type="button" id="addtext" value="Add Text" />
<input type="button" id="undo" value="Undo" />
<input type="button" id="redo" value="redo" />
<input type="button" id="clear" value="Clear Canvas" />

CSS

canvas {
    border:1px solid #000;
}
.controles {
    margin:50px 0;
}

JavaScript

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

var current;
var list = [];
var state = [];
var index = 0;
var index2 = 0;
var action = false;
var refresh = true;
state[0] = JSON.stringify(canvas.toDatalessJSON());
console.log(JSON.stringify(canvas.toDatalessJSON()));
$("#clear").click(function(){
    canvas.clear();
    index=0;
  });
 $("#addtext").click(function(){
   ++index;
   action=true;  
var text = new fabric.Text('Sample', {
   fontFamily: 'Hoefler Text',
    left: 100,
    top: 100,
    //textAlign: 'center',
    fill: 'navy',

});
canvas.add(text);   
}); 
canvas.on("object:added", function (e) {
    
    if(action===true){

        var object = e.target;
    console.log(JSON.stringify(canvas.toDatalessJSON()));
    state[index] = JSON.stringify(canvas.toDatalessJSON());
    refresh = true;
        action=false;
        canvas.renderAll();
    }
});
function undo() {

    if (index < 0) {
        index = 0;
        canvas.loadFromJSON(state[index]);
        canvas.renderAll();
        return;
    }


    console.log('undo');

    canvas.loadFromJSON(state[index]);
    
    console.log(JSON.stringify(canvas.toDatalessJSON()));
    canvas.renderAll();
    action = false;
}

function redo() {

    action = false;
    if (index >= state.length - 1) {
        canvas.loadFromJSON(state[index]);
        canvas.renderAll();
        return;
    }

    console.log('redo');

    canvas.loadFromJSON(state[index]);
    
    console.log(JSON.stringify(canvas.toDatalessJSON()));
    canvas.renderAll();
    
    canvas.renderAll();
    
}

canvas.on("object:modified", function (e) {
    var object = e.target;
    console.log('object:modified');
    console.log(JSON.stringify(canvas.toDatalessJSON()));
    state[++index] = JSON.stringify(canvas.toDatalessJSON());
    action=false;
});

$('#undo').click(function () {
    index--;
    undo();
});
$('#redo').click(function () {
    index++;
    redo();
});