HTML and CSS Reference
Alpha Transparency with the globalAlpha Property
We have chosen context.globalAlpha for this animation because it is very easy to explain
and makes for an effective demonstration of animating on the Canvas. The globalAlpha
property is the setting for transparency on the Canvas. The property accepts numbers from 0
through 1 , representing a percentage of opaqueness for what will be drawn after the property
is set. For example:
context . globalAlpha = 0 ;
context . globalAlpha = 1 ;
The preceding code would set everything drawn afterwards to be rendered 100% opaque, or
context . globalAlpha = . 5 ;
The preceding code would set everything drawn afterwards to be rendered 50% opaque, or
fade in or out.
context.globalAlpha affects everything drawn afterward, so if you don't want something drawn
with the globalAlpha property of the last thing drawn, you need to reset the value before drawing
onto the Canvas.