You are previewing Core HTML5 Canvas: Graphics, Animation, and Game Development.

Core HTML5 Canvas: Graphics, Animation, and Game Development

Cover of Core HTML5 Canvas: Graphics, Animation, and Game Development by David Geary Published by Prentice Hall
O'Reilly logo

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

The best content for your career. Discover unlimited learning on demand for around $1/day.