HTML5: Your visual blueprint™ for designing rich web pages and applications

CREATE ANIMATIONS ON THE CANVAS

Before you can begin creating animations on the canvas, it is important to understand the correct way to time your animations in HTML5 web browsers.

Prior to HTML5, JavaScript animations relied on the setTimeout() and setInterval() functions. These allowed you to create asynchronous pseudo-threads — not true process threads, which are discussed in Chapter 16, “Running Secondary JavaScript Threads Using Web Workers” — that split the JavaScript flow. One problem was that they were active regardless of the browser’s current visible state: If you opened a website with an active animation in one tab and then navigated to another tab, the animation would still be active in the CPU, calculating and updating a hidden browser ...