HTML5画布绘制撤消功能的性能

Question

你好，我有一个大画布，如：5000px x 5000px和许多绘画工具。我需要知道什么是解决undo函数的最佳解决方案，没有滞后或非常大的使用内存。现在我尝试创建每个mousedown使用toDataUrl方法将我的画布保存到数组。

您认为这是一个好方法还是我需要寻找更好的方法来解决这个问题？

示例使用小画布并且只有一个绘画工具 - 铅笔：

http://codepen.io/anon/pen/azyPGN

Html（部分）：

<canvas width="5000" height="5000" id="paint"></canvas>

保存并恢复代码部分：

var history = {
  redo_list: [],
  undo_list: [],
  saveState: function(canvas, list, keep_redo) {
    keep_redo = keep_redo || false;
    if(!keep_redo) {
      this.redo_list = [];
    }

    (list || this.undo_list).push(canvas.toDataURL());   
  },
  undo: function(canvas, ctx) {
    this.restoreState(canvas, ctx, this.undo_list, this.redo_list);
  },
  redo: function(canvas, ctx) {
    this.restoreState(canvas, ctx, this.redo_list, this.undo_list);
  },
  restoreState: function(canvas, ctx,  pop, push) {
    if(pop.length) {
      this.saveState(canvas, push, true);
      var restore_state = pop.pop();
      var img = new Element('img', {'src':restore_state});
      img.onload = function() {
        ctx.clearRect(0, 0, 600, 400);
        ctx.drawImage(img, 0, 0, 600, 400, 0, 0, 600, 400);  
      }
    }
  }
}