Chapter 2. Drawing

The HTML5 Canvas 2d context provides a powerful graphics API for implementing sophisticated and compelling graphics applications that run in a browser.

Figure 2.1 shows a paint application that lets you draw text, lines, rectangles, circles, bézier curves, and arbitrary paths—both open and closed—that you trace with the mouse. You erase by selecting the bottom icon and subsequently dragging the eraser in the drawing area (see Section 2.15.1, “Erasing with the Clipping Region,” on p. 187). You change drawing attributes with the HTML controls at the top of the page, and you can take a snapshot of the application so users can save their painting as an image.

Figure 2.1. A paint application

The paint application uses rubber bands for interactive drawing; as the user drags the mouse to create a new shape, such as a circle or rectangle, the application continuously draws an outline of the shape. When the user releases the mouse, the application finalizes the shape by drawing and possibly filling the shape. The application fills shapes when the user has clicked in the lower-right corner of the icon representing that shape.