Canvas reference: The globalAlpha property

Summary: The globalAlpha property sets the opacity to be used for all operations (eg drawing images)

The globalAlpha property controls the opacity (transparency) of whatever is drawn on to 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>