HTML5 Canvas Essentials
- 1.1. The canvas Element
- 1.2. Canvas Contexts
- 1.3. Canonical Examples in This Book
- 1.4. Getting Started
- 1.5. Fundamental Drawing Operations
- 1.6. Event Handling
- 1.7. Saving and Restoring the Drawing Surface
- 1.8. Using HTML Elements in a Canvas
- 1.9. Printing a Canvas
- 1.10. Offscreen Canvases
- 1.11. A Brief Math Primer
- 1.12. Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
In 1939, Metro-Goldwyn-Mayer Studios released a film that, according to the American Library of Congress, was destined to become the most watched film in history.The Wizard of Ozis the story of a young girl named Dorothy and her dog Toto, who are transported by a violent tornado from Kansas in the central United States to the magical land of Oz.
The film begins in Kansas and is shot in a bland and dreary black-and-white. When Dorothy and Toto arrive in the land of Oz however, the film bursts into vibrant color, and the adventure begins.
For more than a decade, software developers have been implementing bland and dreary web applications that do little more than present bored-to-death users with a seemingly unending sequence of banal forms. Finally, HTML5 lets developers implement exciting desktop-like applications that run in the browser.
In this HTML5 land of Oz, we will use the magicalcanvaselement to do amazing things in a browser. We will implement image panning, as shown inFigure 1.1; an interactive magnifying glass; a paint application that runs in any self-respecting browser and that also runs on an iPad; several animations and games, including an industrial-strength pinball game; image filters; and many other web applications that in another era were almost entirely the realm of Flash.
)
Figure 1.1.Canvas offers a powerful graphics API
Let’s get started.
1.1. ThecanvasElement
Thecanvaselement is arguably the single most powerful HTML5 element, although, as you’ll see shortly, its real power lies in the Canvas context, which you obtain from thecanvaselement itself.Figure 1.2shows a simple use of thecanvaselement and its associated context.
)
Figure 1.2.Hello canvas
The application shown inFigure 1.2simply displays a string, approximately centered in the canvas itself. The HTML for that application is shown inExample 1.1.
The HTML inExample 1.1uses acanvaselement and specifies an identifier for the element and the element’s width and height. Notice the text in the body of thecanvaselement. That text is known as thefallback content, which the browser displays only if it does not support thecanvaselement.
Besides those two elements, the HTML inExample 1.1uses CSS to set the application’s background color and some attributes for thecanvaselement itself. By default, acanvaselement’s background color matches the background color of its parent element, so the CSS sets thecanvaselement’s background color to opaque white to set it apart from the application’s light gray background.
The HTML is straightforward and not very interesting. As is typically the case for Canvas-based applications, the interesting part of the application is its JavaScript. The JavaScript code for the application shown inFigure 1.2is listed inExample 1.2.
Example 1.1.example.html
html></code>A Simple Canvas Example<code style="color:#B84B9E">