html - HTML5 Canvas Drawing App の消しゴムアクションを元に戻す方法

Question

ユーザーが描画する色を選択したり、描画ツールのサイズ (半径) を変更したり、元に戻したり、やり直したり、キャンバスを完全にクリアしたりできる基本的な機能を備えた HTML5 描画アプリを作成しました。

最近、globalCompositionProperty (desitnation-out) を使用して消しゴム ツールを追加し、キャンバスの選択した領域を消去しました。この部分は正常に機能しますが、消去を元に戻すと、キャンバス全体がクリアされ、やり直し機能が機能しません。通常の描画ツール (source-over を使用) で描画を再開すると、元に戻す/やり直しが機能します。アプリで使用されるいくつかの関数のコードを含めました。描画ツールをオフにするたびに、キャンバスのスナップショットを保存します。これは、キャンバスの取り消しと復元に使用される配列に追加されます。

ここで私が間違っている可能性があることを誰かが説明できますか? globalCompositeOperation プロパティが、保存されているキャンバスの DataURI にどのように影響するかがよくわかりません。

function storeSnapshot() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(canvas.toDataURL());
}

var putPoint = function(e){
    if(dragging){
    context.lineTo(e.clientX - 174, e.clientY - 50);
    context.stroke();
    context.beginPath();
    if(eraser == true){
        context.globalCompositeOperation="destination-out";

    }else{
        context.globalCompositeOperation="source-over"; 
    }
    context.arc(e.clientX - 174, e.clientY - 50 , radius, 0, 2 * Math.PI);
    context.fill();
    context.beginPath();
    context.moveTo(e.clientX - 174, e.clientY - 50);
    }
}

更新：しばらくこれをいじった後、問題を解決する何かを試しました。それが正しい方法かどうかは正確にはわかりませんが、私が行ったことをすべてお見せしたいと思います。

マウスアップでトリガーされる解放機能があります。前の関数は次のとおりです。

var disengage = function(){
dragging = false;
context.beginPath();
storeSnapshot();
    }

コードを少し追加しました。これにより、ユーザーは消しゴム ツールを使用して、アクションを元に戻したりやり直したりできます。なぜこれが機能するのかはまだ正確にはわかりません。

var disengage = function(){
dragging = false;
context.beginPath();
if(eraser == true)
{
    context.globalCompositeOperation="source-over"; 
}
storeSnapshot();
    }