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>