Canvas undo function

Hello guys. I have code for drawing on a canvas. Code working but cannot figure out how to add undo function.
Thank you for any help.

[code]
//Drawing canvas

var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
var color;
var stroke;
var index;

function init() {
if (window.top != window) {
document.getElementById(“header”).style.display = “none”;
}
canvas = document.getElementById(“canvas”);
index = 0;

//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);

createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);

drawingCanvas = new createjs.Shape();

stage.addEventListener(“stagemousedown”, handleMouseDown);
stage.addEventListener(“stagemouseup”, handleMouseUp);

stage.addChild(drawingCanvas);
stage.update();
}

function stop() {}

function handleMouseDown(event) {
color = $(‘#selColor’).val();
stroke = document.getElementById(“selWidth”).value;
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt;
stage.addEventListener(“stagemousemove” , handleMouseMove);
}

function handleMouseMove(event) {
var midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);

drawingCanvas.graphics.clear().setStrokeStyle(stroke, ’round’, ’round’).beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;

oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;

stage.update();
}

function handleMouseUp(event) {
stage.removeEventListener(“stagemousemove” , handleMouseMove);
}

function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function UndoDraw() {

// hire i need undo code
}
[code]

Also in #JavaScript _↴