HTML and CSS Reference
In the above code snippet, we draw a partially transparent blue circle overlapping part
of a red circle. The portion of the circles that overlaps will produce the color purple
from the mixing of the blue with the red, as seen in Figure 9-4 .
Figure 9-4. Applying partial transparency to the blue circle so its color mixes with that of the red circle
in the overlap
In general, a canvas element starts out with all its pixels being completely transparent.
Any pixel that is drawn with a fully opaque color will no longer have any transparency,
whereas any pixel that is drawn with a partially opaque color will retain partial trans-
parency. The default is fully opaque with no transparency. You generally define the
alpha transparency of a color with "rgba" , in the same way that you specify CSS3 color
values (see http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical ), like so:
mycontext.fillStyle = "rgba(255,0,0, 0.5 )";
Here, the 0.5 specifies a 50% opacity for the red color, meaning all pixels that are drawn
with that color style will have 50% transparency and thus that the content from beneath
will partially show through, as shown in Figure 9-5 .
The other way to affect the transparency of rendered pixels is to set the globalAlpha
property, with a value ranging from 0.0 to 1.0 .