HTML and CSS Reference
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.
For more information on transparency, see this canvas “styles and colors” tutorial on