The globalAlpha property

• An example

[No canvas support]

The globalAlpha property controls the opacity (transparency) of whatever is drawn onto the canvas. So if you want your drawing to be partly see-through - you could set this to 0.5. Valid ranges are from 0 (fully transparent) to 1 (fully opaque). If you try to set the value to something outside his range it will retain its prior value.

If you want to implement a fade-in effect you could use this property - though if you want to fade-in the whole canvas a better idea would be to use the CSS opacity value - meaning that repeated redrawing is not necessary.

An example

<script>
    window.onload = function ()
    {
        var canvas = document.getElementById('cvs');
        var context = canvas.getContext('2d');

        // Set the globalAlpha so that drawing on the canvas is semi-transparent
        context.globalAlpha = 0.3;
        
        var img = new Image();
        img.src = '/images/logo.png';
        img.onload = function ()
        {
            context.drawImage(img, 16, 16);
        }
    }
</script>