How to make an undo function in canvas?

Question

I have a canvas HTML5 drawing pad.

I would like to create a button with an undo function.

How can I do it?

My idea was to have one array stack. Anytime you draw and release the mouse, it saves the canvas image to the undo array stack by push. But as I tried it, it doesn't really work... Is there a better idea?

Thank you in advance!

var canvas = document.getElementById('paint');
var ctx = canvas.getContext('2d');
var sketch = document.getElementById('sketch');
var sketch_style = getComputedStyle(sketch);

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineJoin = 'round';
ctx.lineCap = 'round';

ctx.strokeStyle = "red";
function getColor(colour){ctx.strokeStyle = colour;}

function getSize(size){ctx.lineWidth = size;}

canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);

canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};   

Answer 1

This is how I would do it:

The main idea is: on mouseup I'm saving the last drawn path in an array. When I click the undo button I remove the last path from the paths array. I'm deleting everything and next I draw all the paths in the paths array.

I'm using a variable drawing that at the beginning is false. When I click on the canvas drawing is true. on mouseup drawing is false. Only if drawing == true I can draw.

const canvas = document.getElementById('paint');
const ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height=200;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = "red";
let drawing = false;
let pathsry = [];
let points = [];

var mouse = {x: 0, y: 0};
var previous = {x: 0, y: 0};

canvas.addEventListener('mousedown', function(e) {
drawing = true; 
previous = {x:mouse.x,y:mouse.y};
mouse = oMousePos(canvas, e);
points = [];
points.push({x:mouse.x,y:mouse.y})
});

canvas.addEventListener('mousemove', function(e) {
if(drawing){
previous = {x:mouse.x,y:mouse.y};
mouse = oMousePos(canvas, e);
// saving the points in the points array
points.push({x:mouse.x,y:mouse.y})
// drawing a line from the previous point to the current point
ctx.beginPath();
ctx.moveTo(previous.x,previous.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
}
}, false);


canvas.addEventListener('mouseup', function() {
drawing=false;
// Adding the path to the array or the paths
pathsry.push(points);
}, false);


undo.addEventListener("click",Undo);

function drawPaths(){
  // delete everything
  ctx.clearRect(0,0,canvas.width,canvas.height);
  // draw all the paths in the paths array
  pathsry.forEach(path=>{
  ctx.beginPath();
  ctx.moveTo(path[0].x,path[0].y);  
  for(let i = 1; i < path.length; i++){
    ctx.lineTo(path[i].x,path[i].y); 
  }
    ctx.stroke();
  })
}  

function Undo(){
  // remove the last path from the paths array
  pathsry.splice(-1,1);
  // draw all the paths in the paths array
  drawPaths();
}


// a function to detect the mouse position
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
 return { //objeto
 x: Math.round(evt.clientX - ClientRect.left),
 y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid}

<button id="undo">undo</button><br>
<canvas id="paint"></canvas>