Canvas - HTML5 - page 191

See Also
For more information on how to use canvas , see this canvas tutorial on MDC: https://
developer.mozilla.org/en/Canvas_tutorial .
9.2 Using Transparency
Problem
You want to draw shapes in the canvas element which have some transparency, so they
allow content from beneath to show through.
Solution
The canvas element is, by default, transparent, which means that it will show any con-
tent that is stacked beneath it. You can control what pixels are transparent or not simply
by what you draw onto the canvas element.
If we position a red circle drawing (like the one from the previous recipe) over the top
of some text, the portions of the canvas element not drawn on by the circle will remain
transparent, and the text from beneath will show through, as illustrated in Figure 9-2 .
Figure 9-2. Drawing a circle on top of text in a page, with transparency showing the not-covered text
from beneath