HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 24

Canvas: Part I

The HTML5 canvas element provides a canvas for capturing bitmap images. The Canvas API, on the other hand, allows you to interact with the canvas element using JavaScript. The canvas can be used for simple drawing, such as shapes and lines, and for more advanced features, such as animation. The canvas element and API provide an alternative to plugins such as Adobe Flash.

This lesson covers the basics of the Canvas API; the next lesson covers some of the advanced features. Although the features covered in this lesson appear quite basic, they can still be ­combined to construct complex images.

The Canvas API is, however, a reasonably low-level API. This has the benefit of making almost anything possible, but it also means that it is sometimes tedious to perform relatively simple operations.

The canvas element creates a bitmap (or raster) image. Essentially, this means that each pixel on the screen is represented by a position in memory that describes the color of the pixel.

Note

Originally, bitmap images were referred to as bitmaps because each pixel could have a 0 or 1 value to denote black or white. Because the canvas supports multiple colors, it is technically a pixmap.

The other major category of image is vector graphics. Vector graphics describe shapes as mathematical formulas, and therefore do not need to store information about every pixel. The shapes can then be assigned properties such as their fill color. Vector graphics work extremely ...