- 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
1.4. Getting Started
This section gives you a brief overview of your development environment, from the browsers in which your application will run to the development tools, such as profilers and timelines, that you will use during development. Feel free to skim this section and use it as a reference as necessary.
1.4.1. Specifications
Three specifications are pertinent to this book:
- HTML5 Canvas
- Timing control for script-based animations
- HTML5 video and audio
For historical reasons, there are actually two Canvas specifications that are nearly identical. One of those specifications is maintained by the W3C and can be found at http://dev.w3.org/html5/spec; the other specification is maintained by the WHATWG and can be found at http://bit.ly/qXWjOl. Furthermore, whereas the Canvas context is included in the WHATWG’s specification, the WC3 has a separate specification for the context, at http://dev.w3.org/html5/2dcontext.
For a long time, people used window.setInterval() or window.setTimeout() for web-based animations; however, as you will see in Chapter 5, those methods are not suitable for performance-critical animations. Instead, you should use window.requestAnimationFrame(), which is defined in a specification of its own named Timing control for script-based animations. You can find that specification at http://www.w3.org/TR/animation-timing.
Finally, this book shows you how to incorporate HTML5 video and audio into your Canvas-based applications. HTML5 video and audio are covered in the same specification, which you can find at http://www.w3.org/TR/html5/video.html.
1.4.2. Browsers
At the time this book went to press in early 2012, all five major browsers—Chrome, Internet Explorer, Firefox, Opera, and Safari—provided extensive support for HTML5 Canvas. Although there are some minor incompatibilities that mostly stem from different interpretations of the Canvas specification—for example, see Section 2.14.1, “The Compositing Controversy,” on p. 186, which explains incompatibilities for compositing—browser vendors have done an admirable job of both adhering to the specification and providing implementations that perform well.
Chrome, Firefox, Opera, and Safari have all had HTML5 support for some time. Microsoft’s Internet Explorer was a bit late to the game and did not provide extensive support for HTML 5 until IE9. However, Microsoft has done a phenomenal job with Canvas in IE9 and IE10; in fact, as this book went to press, those two browsers had the fastest Canvas implementation from among the five major browsers.
If you are implementing a Canvas-based application and you must support IE6, IE7, or IE8, you have two choices, depicted in Figure 1.4: explorercanvas, which adds Canvas support to those older versions of Internet Explorer, and Google Chrome Frame, which replaces the IE engine with the Google Chrome engine. Both explorercanvas and Google Chrome Frame are from Google.
)
Figure 1.4. explorercanvas and Google Chrome Frame for IE6/7/8, from Google
1.4.3. Consoles and Debuggers
All the major browsers that support HTML5 give you access to a console and a debugger. In fact, because browser vendors often borrow ideas from each other, the consoles and debuggers provided by WebKit-based browsers—Firefox, Opera, and IE—are all pretty similar.
Figure 1.5 shows the console and debugger for Safari.
)
Figure 1.5. The Safari console and debugger
You can write to the console with the console.log() method. Just pass that method a string, and it will appear in the console. The debugger is standard debugger fare; you can set breakpoints, watch expressions, examine variables and the call stack, and so on.
A full treatment of the developer tools for various browsers is beyond the scope of this book. For more information about developer tools for Chrome, take a look at the Chrome Developer Tools documentation, shown in Figure 1.6. Similar documentation is available for other browsers.
)
Figure 1.6. The Chrome Developer Tools documentation
TIP: Start and stop the profiler programmatically
As you can see from Figure 1.6, you can start profiling in WebKit-based browsers by clicking the filled circle at the bottom of the profiler window.
Controlling the profiler by clicking buttons, however, is often insufficient; for example, you may want to start and stop profiling at specific lines of code. In WebKit-based browsers, you can do that with two methods: console.profile() and console.profileEnd(). You use them like this:
console.profile('Core HTML5 Animation,erasing the background');//... console.profileEnd();
1.4.4. Performance
Most of the time the applications that you implement with Canvas will perform admirably; however, if you are implementing animations or games or if you are implementing Canvas-based applications for mobile devices, you may need to make performance optimizations.
In this section we briefly look at the tools you have at your disposal for discovering performance bottlenecks in your code. To illustrate the use of those tools, we refer to the application shown in Figure 1.7. That animation, which is discussed in Chapter 5, simultaneously animates three filled circles.
)
Figure 1.7. An animation from Chapter 5
We discuss three tools:
- Profilers
- Timelines
- jsPerf
The first two tools in the preceding list are provided by browsers directly or are offered as add-ons. jsPerf, on the other hand, is a website that lets you create performance tests and make them public. In the sections that follow we will look at profiling and timeline tools available in Chrome and Safari, and then we will take a look at jsPerf.
1.4.4.1. Profiles and Timelines
Profiles and timelines are indispensable for discovering performance bottlenecks in your code. Figures 1.8 and 1.9 show a timeline and a profile, respectively, for the animation shown in Figure 1.7.
)
Figure 1.8. Timelines
)
Figure 1.9. Profiles
Timelines give you a record of significant events that occur in your application, along with details of those events such as their duration and the area of the window they affect. In WebKit-based browsers, such as Chrome and Safari, you can hover the mouse over those events to obtain their associated details, as illustrated in Figure 1.8.
Profilers give you a much more detailed view of how your code performs at the function level. As you can see in Figure 1.9, profiles show you how many times each function in your application is called, and how long those functions take. You can see what percentage of the total execution time is taken up by each function, and you can also discover exactly how many milliseconds each function takes, on average, to execute.
1.4.4.2. jsPerf
jsPerf, shown in Figure 1.10, is a website that lets you create and share JavaScript benchmarks.
)
Figure 1.10. jsperf.com homepage
You may wonder, for example, what’s the most efficient way to loop through pixels in an image that you are processing in a canvas. If you click the “test cases” link, shown at the top of the screenshot in Figure 1.10, jsPerf displays all of the publicly available test cases, as shown in Figure 1.11.
)
Figure 1.11. Code for a Canvas test case at jsfperf.com
In fact, not only are there many Canvas-related tests at jsperf.com, there is a test case that matches the description in the preceding paragraph, which is highlighted in Figure 1.11. If you click the link for that test case, jsPerf shows you the code for the test case, as shown in Figure 1.12. You can run the test case yourself, and your results will be added to the test case. You can also look at the results for all the different browsers that users have used to run the test case (not shown in Figure 1.12).
){kind=tracking}
Figure 1.12. A test case for looping through image pixels
Now that we’re done with the preliminaries, let’s look at how to draw into a canvas.