Core HTML5 Canvas: Graphics, Animation, and Game Development

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 ...