HTML and CSS Reference
In-Depth Information
CANVAS BASICS
Because the
canvas
element is a crucial part of HTML5 and works only with HTML5-
compatible browsers, the i rst thing you want to do is to let users know that they need an
HTML5 browser. Several methods are available to i nd out whether canvas works with their
browser, but the easiest and most informative (to the user) is to place a message in the
<canvas>
container. Only users without HTML5-compatible browsers see the text in the
container. For example, the following line, easily mistaken for the outcry of a drama queen,
gets the message across. At the same time it remains invisible to users who have HTML5
browsers:
<canvas
id
=
”colorScheme”
width
=
”600”
height
=
”100”
>
Come on, Jack & Jill! You
<
i
>
really
</
i
>
need to get an HTML5 Compatible browser. You're missing
<
b
>
canvas!
</
b
></canvas>
I dug up an old (really old!) Internet Explorer browser for the Mac. Figure 13-1 shows what
appeared when I opened the page with the
<canvas>
tag.
254
Figure 13-1: Message viewed with a non-HTML5 browser.
Just to be fair, I ran the same program in an early (really early!) version of Internet Explorer 9.
As you can see in Figure 13-2, the
canvas
drawing appears, but the message does not.
Figure 13-2:
Canvas
on an HTML5 browser.
