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: