> 實現原理：

1. 儲存快照：每完成一次繪製操作則儲存一份 canvas 快照到 canvasHistory 陣列（生成快照使用 canvas 的 toDataURL() 方法，生成的是 base64 的圖片）；
2. 撤銷和反撤銷：把 canvasHistory 陣列中對應索引的快照使用 canvas 的 drawImage() 方法重繪一遍；
3. 繪製新影象：執行新的繪製操作時，刪除當前位置之後的陣列記錄，然後新增新的快照。

// 變數定義
let myCanvas = document.querySelector('#myCanvas');
let ctx = myCanvas.getContext
 
('2d');
let canvasWidth = 200;
let canvasHeight = 200;
let canvasHistory = [];
let step = -1;
// 繪製方法
canvasDraw() {
	step++;
    if (step < canvasHistory.length) {
    	canvasHistory.length = step; // 截斷陣列
    }
    // 執行繪製的相關操作（如繪製圖片、線條等）
    // ...
    // ...
    canvasHistory.push(myCanvas.toDataURL()); // 新增新的繪製到歷史記錄
 

}
// 撤銷方法
canvasUndo() {
  if (step >= 0) {
    step--;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    let canvasPic = new Image();
    canvasPic.src = canvasHistory[step];
    canvasPic.addEventListener('load', () => {
      ctx.drawImage(canvasPic, 0, 0);
    });
  } else {
    console.log
 
('不能再繼續撤銷了');
  }
}
// 反撤銷方法
canvasRedo() {
  if (step < canvasHistory.length - 1) {
    step++;
    let canvasPic = new Image();
    canvasPic.src = canvasHistory[step];
    canvasPic.addEventListener('load', () => {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.drawImage(canvasPic, 0, 0);
    });
  } else {
    console.log('已經是最新的記錄了');
  }
}