O'Reilly logo

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

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

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

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