javascript - パフォーマンスのための HTML5 キャンバス ペイントの取り消し機能

Question

こんにちは、5000px x 5000px のような大きなキャンバスと多くのペイント ツールがあります。undoラグや非常に大きな使用メモリなしで関数を解決するための最良のソリューションは何かを知る必要があります。mousedownここで、メソッドを使用してキャンバスを配列に保存するたびに作成してみますtoDataUrl。

これは良い方法だと思いますか、それともこの問題を解決するためのより良い方法を探す必要がありますか?

小さなキャンバスと 1 つのペイント ツール (鉛筆) のみの例:

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);  
      }
    }
  }
}