Canvas - HTML5 - page 185

CHAPTER 9
<canvas>
Kyle Simpson
9.0 Introduction
One of the most exciting additions to web pages to be standardized by HTML5 is the
canvas element:
<canvas id="mycanvas"></canvas>
This simple element allows users to draw graphics such as lines, circles, and fills directly
into a rectangle-shaped block element that appears on the web page.
There are numerous features associated with the canvas element. For example, in
addition to drawing images manually, browsers can take raw image data from an
external image file and “draw” it onto the canvas element.
You can also erase and redraw all or a portion of the canvas image. The ability to edit
canvas images lends itself to the creation of animations, where you appear to move
elements around by drawing and redrawing them in varying positions.
In addition, canvas elements can have transparency, which means they can be layered
or stacked on top of each other to create more sophisticated graphical images/effects.
There are also a number of transformations and effects that you can apply to your
canvas drawings. In essence, a canvas image is a dynamic image, unlike a static PNG
or JPEG file.
In much the same way that you might draw an image using a graphics program like
Adobe Photoshop, save it to a file, and load it into a web page, with canvas you can
automate the drawing commands through code and immediately see the results on the
page, without the need for loading an external file.
This capability allows you to do many sophisticated things that were once difficult or
impossible to do, such as dynamically creating preview images.