HTML and CSS Reference
In-Depth Information
support
canvas
will show the inner content just as if the outer
canvas
element didn't exist. The fallback
content should preferably be some usable replacement content, such as an image or text equivalent,
depending on what you're drawing. For example, if you're using
canvas
to render charts from numerical
data, the fallback content might be the same data presented in a table. If it's a diagram or illustration, you
could provide a static image version of it, like you see in Listing 5-10 (Figure 5-11 shows the result). If the
canvas
drawing is decorative and not essential, leaving the element empty means older browsers won't
display anything at all.
Listing 5-10.
A
canvas
element containing an image as fallback content for older browsers
<figure>
<canvas id="shrinkray" width="460" height="300">
<p>We're terribly sorry, but your browser can't display the original
interactive diagram. Please enjoy this static version instead.</p>
<img src="images/shrinkray-diagram.png" width="460" height="300"
alt="A line diagram labeling the key components of the Power Outfitters
V900 portable shrink ray. It's shaped like a pistol, with a rounded body,
a beam emitter (barrel), hand grip, and trigger. On the side of the body
casing are a mode switch and dial control for level adjustment.">
</canvas>
<figcaption>
The Power Outfitters V900 portable shrink ray
</figcaption>
</figure>
Figure 5-11.
Older browsers that don't support
canvas
will show the static image instead
