HTML and CSS Reference
In-Depth Information
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
;
Theprecedingcodewouldseteverythingdrawnafterwardtoberendered0%opaque,orcom-
pletely transparent.
context
.
globalAlpha
=
1
;
The preceding code would set everything drawn afterwards to be rendered 100% opaque, or
0% transparent.
context
.
globalAlpha
=
.
5
;
The preceding code would set everything drawn afterwards to be rendered 50% opaque, or
50% transparent.
Bymanipulatingthesevaluesovertime,wecanmakethingsdrawnontotheCanvasappearto
fade in or out.
NOTE
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.
