Canvas globalAlpha Özelliği

globalAlpha özelliği, yapılan çizimler için genel bir saydamlık derecesi tanımlar. Bu özellikle saydamlık belirlendikten sonra yapılan tüm çizimler aynı saydamlıta olacaktır.

globalAlpha özelliği 0 ile 1 arasında bir değer alır. Örneğin yarı saydam bir görüntü için 0.5 yazın.

Örnek:

<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
    Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
 
<script>
    function ciz() {
 
        var tuval = document.getElementById("cnTuval");
        var ctx = tuval.getContext("2d");
 
        ctx.fillStyle = "red";
 
        // Normal çiz (opak / ışık geçirmez).
        ctx.fillRect(5, 5, 60, 40);
 
        ctx.globalAlpha = 0.25;
 
        // Yeni alpha değerine göre çizimler yap.
        ctx.fillRect(60, 70, 60, 40);
        ctx.fillRect(80, 90, 60, 40);
 
 
        // Çizimler opak çizilsin.
        ctx.globalAlpha = 1;
 
        ctx.fillRect(135, 155, 60, 40);
 
    }
 
    ciz();
 
</script>

Çıktı şöyle olacaktır: