canvasのお絵描きツールに『戻る』『進む』ボタンをつけてみる

描き間違いがあったときに一つ前の状態に戻る機能がほしくなったので、その機能を追加することに。とりあえず、五回分を保存できるようにしてみた。塗りつぶし機能よりは簡単に実装できました。

以下、JavaScriptのコード

var imageMemory = new Array(5); // キャンバスのイメージの保存用配列
var flagMemory = 0; // 現在のキャンバスの番号
$('#backBtn, #forwardBtn').attr('disabled', true);
// 現在のキャンバス状態を保存
function saveImageData(){
    // 現在の状態を保存
    if(flagMemory == imageMemory.length-1){
        imageMemory.shift();
    }else{
        ++flagMemory;
    }
    
    if(flagMemory == imageMemory.length-1){
        $('#forwardBtn').attr('disabled',true);   
    }
    
    imageMemory[flagMemory] = ctx.getImageData(0,0,canvas.width,canvas.height);
    
    $('#backBtn').attr('disabled',false);
}
// 戻るボタン
$('#backBtn').click(function(){
    if(flagMemory > 0){
        flagMemory--;
        ctx.putImageData(imageMemory[flagMemory], 0, 0);
        
        $('#forwardBtn').attr('disabled', false);
        if(flagMemory==0){
            $('#backBtn').attr('disabled', true);   
        }
    }
});
// 進むボタン
$('#forwardBtn').click(function(){
    if(flagMemory < imageMemory.length-1){
        flagMemory++;
        ctx.putImageData(imageMemory[flagMemory], 0, 0);
        
        $('#backBtn').attr('disabled', false);
        if(flagMemory==imageMemory.length-1){
            $('#forwardBtn').attr('disabled', true);   
        }
    }
    
});

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

saveImageDataという関数は、初期状態やキャンバス上でマウスボタンやタッチが離された時に実行するようにしています。やっていることは単純で、17行目のgetImageDataメソッドで現在のキャンバスの状態をimageMemory という配列に保存し、戻るボタンや進むボタンをおした時に現在の番号(flagMemory)の前や次に対応したimageMemoryに入っているキャンバスのデータをputImageDataでキャンバス上に描画しています。
何度か戻った後に新しくキャンバスに絵を書いた場合、次の画像というものがないのが自然な気はしますが、わざわざ消す必要もないだろうと思い、消してません(面倒だっただけだろと突っ込まないでください)。

なんというか、本当思いついたらその分追加するだけのコードになっているので、汚い気はします。もっとキレイなコードを書けるようになりたいです。