ブログでHTML5 Canvas コンテキストの保存とリストア

コンテキストの保存とリストア

コンテキストの状態を保存したい時があります。
たとえば、fillStyleなどの値です。
現在のコンテキストを保存しておいて、後で使いたい場合というケースはあるものです。

<canvas id="drawSaveRestoreDemoCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawSaveRestoreDemoCanvas");
        var context = canvas.getContext("2d");
        context.save();
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(0, 0, 100, 50);
        context.restore();
        context.fillRect(0, 50, 100, 50);
    })();
</script>

このケースでは、最初fillStyleの値は黒です。
context.save()して、fillStyleの現在の値を保存します。
fillStyleを一時的に青にします。
青で長方形を描きます。
リストアしてさっき保存したfillStyleの値（黒）に戻します。
黒で長方形を描きます。

青と黒の長方形が描けました！