JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvasId" width="500" height="500"></canvas>

CSS

canvas {
  border: 2px solid black;
}

JavaScript

var ctx = document.getElementById("canvasId").getContext("2d");
    var DrawnSaves = new Array();
    var Undo = new Array();
    var FigureNumber = -1;
    var deletingTimer;
    function drawLine(startX, startY, destX, destY) {
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(destX, destY);
        ctx.stroke();
        var Para = new Array();
        Para["type"] = "line";
        Para["fromX"] = startX;
        Para["fromY"] = startY;
        Para["toX"] = destX;
        Para["toY"] = destY;
        DrawnSaves.push(Para);
        FigureNumber++;
    }
    function undo() {
        ctx.beginPath();
        ctx.clearRect(0, 0, 500, 500);
        Undo[FigureNumber] = DrawnSaves[FigureNumber];
        DrawnSaves[FigureNumber] = "deleted";
        FigureNumber--;
        drawEverything();
        startTimeoutOfDeleting();
    }
    function undoTheUndo() {
        FigureNumber++;
        DrawnSaves[FigureNumber] = Undo[FigureNumber];
        drawEverything();
        clearTimeout(deletingTimer);
    }
    function drawEverything() {
        for (i = 0; i < DrawnSaves.length; i++) {
           if (DrawnSaves[i].type == "line") {
              ctx.beginPath();
              ctx.moveTo(DrawnSaves[i].fromX, DrawnSaves[i].fromY);
              ctx.lineTo(DrawnSaves[i].toX, DrawnSaves[i].toY);
              ctx.stroke();
           }
        }
    }
    function startTimeoutOfDeleting() {
       setTimeout(function() {Undo[FigureNumber] = "deleted";}, 5000);
    }

drawLine(0, 0, 100, 100);
setTimeout(function() {
undo();
}, 1000);
setTimeout(function() {
undoTheUndo();
}, 2000);