Cover Page by David Geary

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required