Canvas çizimlerinde tuval durumunu saklama ve geri yükleme

Çizim yaparken değiştirdiğimiz özellikleri daha sonra yeniden kullanabilmek için, çizim sırasında bu özellik değerlerini tekrar eski haline getirmek gerekir ve bu da bazen çokca kod yazmamızı gerektirir.

Örneğin bir metin görüntülerken lineStyle, fillStyle, textAlign ve font özelliklerini değiştirdiğimizi düşünelim. Metni yazdırdıktan sonra tekrar eski lineStyle, fillStyle, textAlign ve font özelliklerine dönmek için bu özellikleri tek tek eski değerleriyle yeniden değiştirmek gerekir. Bu da bir miktar kodlama gerektirir, bazen uzun olabilir ve hata yapmaya müsait bir durumdur.

save ve restore yöntemleri bu işlem için kısa bir yol sunar.

save yöntemi tuvalin aşağıda tamamı listelenen fillStyle, strokeStyle, lineWidh, lineCap, font gibi özellik değeri ve durumlarını saklar.

restore yöntemi ise save ile saklanan tüm değerleri save yöntemini çağırmadan önceki haline getirir. Dolayısıyla save ile tuvalin durumunu değiştirmeden önce saklarsak daha sonra restore ile kolaylıkla saklanan duruma geri dönebiliriz.

Örnek:

<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
    Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
    function ciz() {

        var tuval = document.getElementById("cnTuval");
        var ctx = tuval.getContext("2d");
        // Tuvalin şu anki durumunu sakla.
        ctx.save();

        // Bu ayarlardan önceki durumda strokeStyle değeri,
        // düz siyah renk, lineWidth değeri ise 1 pikseldir.
        ctx.strokeStyle = "blue"; // Çizgi stili düz mavi renk.
        ctx.lineWidth = 5; // Çizgi kalınlığı 5 piksel.
        ctx.strokeRect(10, 10, 50, 50);

        // Tuvalin durumunu üstteki save yöntemini çağırmadan önceki 
        // duruma (lineWidth = 1, strokeStyle = "black") getir.
        ctx.restore();
        // Tuvalin son durumuyla bir dörtgen çiz.
        ctx.strokeRect(100, 10, 50, 50);

    }
</script>

Çıktısı şöyledir:


save yöntemi restore çağırılmadan arka arkaya çağırılabilir. Böyle bir durumda her bir restore, bir önceki save ile saklanan duruma dönecektir.

Örnek:

<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
    Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
    function ciz() {

        var tuval = document.getElementById("cnTuval");
        var ctx = tuval.getContext("2d");

        ctx.fillStyle = "gray";
        ctx.font = "20px Arial";
        ctx.fillText("Bir", 0, 20);

        // Tuvalin şu anki durumunu (ilk değerleri) sakla.
        // (fillStyle = "gray", font = "20px Arial" durumu)
        ctx.save();

        // font özelliğinin değerini değiştir
        ctx.font = "italic 30px Times";
        // Çizgi rengini değiştir
        ctx.fillStyle = "blue";

        // Yeni değerlerle bir metin görüntüle.
        ctx.fillText("İki", 0, 60);

        // Tuvalin şu anki durumunu sakla
        // (fillStyle = "blue", font = "italic 30px Times" durumu)
        ctx.save();

        // fillStyle özelliğini değiştir.
        ctx.fillStyle = "green";

        // Yeni değerlerle bir metin görüntüle.
        ctx.fillText("Üç", 0, 100);

        // Bir önceki duruma geri dön
        // (fillStyle = "blue", font = "italic 30px Times" durumu)
        ctx.restore();

        // Yeni değerlerle bir metin görüntüle.
        ctx.fillText("Dört", 0, 140);

        // Bir önceki duruma (ilk save'den önceki duruma) geri dön.
        // (fillStyle = "gray", font = "20px Arial" durumu)
        ctx.restore();

        // Son değerlerle bir metin görüntüle.
        ctx.fillText("Beş", 0, 180);

    }
</script>

Çıktısı şöyle olacaktır:


Görüleceği gibi "Bir" metni ilk durumda, "İki" metni ikinci durumda, "Üç" metni üçüncü durumda çizilmiştir. "Dört" metni yazıldığında ise ikinci duruma, "Beş" metni yazıldığında ise birinci / ilk duruma dönülmüştür.

save yöntemi şunları saklar:

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin,miterLimit , shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor,globalCompositeOperation , font, textAlign, textBaseline  özellik değerleri ile daha sonraki makalelerde açıklanacak dönüştürme / biçim değiştirme ve kırpma alanı değerleri.