HTML and CSS Reference
In-Depth Information
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
Discussion
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
.
