HTML5: Your visual blueprint™ for designing rich web pages and applications

DRAW BASIC RECTANGLES ON THE CANVAS

The simplest, and only, shape you can draw on the canvas natively is a rectangle. This may seem like a very restrictive statement, but the canvas rectangle is not designed to be just a simple shape; it provides you with a way to set a solid background color across the entire canvas plane, draw a box or border around a selected area, or erase part or all of the drawing area.

For more complex shapes, everything from lines, to triangles, stars, circles, hearts, bears, cars, and people, you must use a canvas path, as described in the next section, “Draw Paths on the Canvas.”

There are three types of rectangles that you can draw on the canvas:

• Clear rectangle — clearRect(x, y, w, h) — This erases whatever was previously ...