CHAPTER 2  USING THE CANVAS API

Figure 2-22. Still shot of canvas with rain animation

It is up to the browser to decide how often to call the animation frame callback. Pages in the background will be called less frequently, and the browser may clip the rendering to the element provided to the requestAnimationFrame call (“canvas” in our example) to optimize drawing resources. You aren’t guaranteed a frame rate, but you are spared the work of scheduling for different environments!

This technique is not limited to the Canvas API. You can use requestAnimationFrame to make changes anywhere on the page content or CSS. There are other ways to produce movement on a web page—CSS animations come to mind—but if you are working with script-based changes, the requestAnimationFrame function is the way to go.

Summary

As you can see, the Canvas API provides a very powerful way to modify the appearance of your web application without resorting to odd document hacks. Images, gradients, and complex paths can be combined to create nearly any type of display you may be looking to present. Keep in mind that you generally need to draw at the origin, load any images you want to display before attempting to draw them, and be mindful of tainting your canvas with foreign image sources. However, if you learn to harness the power of the canvas, you can create applications that were never possible in a web page before.

61