HTML and CSS Reference
In-Depth Information
256
Figure 13-3: Providing alternative materials for non-HTML5 browsers.
© David Sanders
A SIMPLE CANVAS IMPLEMENTATION
When you're working with Adobe Dreamweaver to create an HTML5 page, you can view the
page in the Design mode to preview what will show up on the screen. However, with material
inside a
<canvas>
container, all you see is the outline. h at outline provides an excellent
visual picture of how
canvas
allocates a certain part of the page for rendering images even
thought it appears as a blank rectangle.
Basically, you're starting of with an empty canvas dei ned by the
width
and
height
attributes of the
<canvas>
tag. If you think about the i rst step in creating a canvas on your
Web page in terms of stretching a canvas on a frame, it helps you visualize the process.
Understanding the grid
To work successfully with
canvas
, you have to understand the grid and the Cartesian
coordinates. Basically, the upper-let corner is the 0,0 position on your page. As you move to
