HTML and CSS Reference
In-Depth Information
Figure 9-5. Applying 50% transparency to the color used to fill a red circle, partially revealing the
previously drawn black line below it
When a pixel is drawn with partial transparency, the default composite operation is to
take that pixel's existing rendered color definition, if any, and combine it with this new
color definition to produce the new pixel color. That's how the black line appears to
be below the partially transparent red dot in
Figure 9-5
.
Keep in mind, though, that there are not two actual layers of shapes here (as you might
be used to with digital imaging software), even though it appears that way. The pixels
that were rendered were composited together, combining what was already there in
the first path with what's drawn by the second path. The final result is still one single-
layer bitmap rendering in your
canvas
element. This means that once these two shapes
have been rendered on top of each other, they cannot be moved or changed independ-
ently, since there's just one bitmap.
However, since pixels in a
canvas
element can have transparency, it is possible to em-
ulate separate layers by simply stacking
canvas
elements, and drawing different shapes
into each. In this case, there is not really
canvas
-level compositing going on between
the two independent layers (they are separate elements, although obviously your
browser, operating system, and computer screen are doing the compositing), so the
two elements can be moved, modified, erased, etc., independently of each other. See
Recipe 9.10
, for more on this subject.
See Also
For more information on transparency, see this
canvas
“styles and colors” tutorial on
