如何在canvas中创建撤消功能？

// 创建一个存储绘制操作的数组
var actions = [];

// 获取canvas元素和绘制上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 监听鼠标点击和移动事件
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

// 定义绘制状态变量
var isDrawing = false;
var lastX = 0;
var lastY = 0;

// 开始绘制
function startDrawing(e) {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
}

// 绘制
function draw(e) {
  if (!isDrawing) return;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  lastX = e.offsetX;
  lastY = e.offsetY;
}

// 停止绘制
function stopDrawing() {
  isDrawing = false;
  // 将绘制操作添加到数组中
  actions.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
}

// 撤消操作
function undo() {
  if (actions.length > 0) {
    actions.pop(); // 移除最后一个操作
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除canvas内容
    redraw(); // 重新绘制
  }
}

// 重新绘制
function redraw() {
  actions.forEach(function(action) {
    ctx.putImageData(action, 0, 0);
  });
}