Animating HTML5 Canvas be it 2d or WebGl can put a strain on the end user’s browser.
Trying to draw more animation frames than the browser can handle can lock it up or cause it to terminate your script. Also if the user is viewing a different tab or is in another window; burning the user’s CPU on animation they don’t even see is just squandering their resources.
Luckily, much like debouncing and throttling for user input and ajax calls, there is something we can do. HTML5 provides a neat solution for animation. The requestAnimationFrame function allows you to put in a call-back which gets executed when the browser is ready to draw another frame. This allows the browser to throttle the animation based on the current CPU load and whether the canvas is on screen or not, resulting in a far better performance and a much lower resource usage.
However, some older browsers don’t support requestAnimationFrame, but we can use the following code to detect if they do, and if they don’t, run though some earlier implementations and finally a fall-back method to ensure we can still use the function:
[code lang=”javascript” title=”Setting up timing function”]
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (function () {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function ( callback,element) {
window.setTimeout(callback, 1000 / 60); // Fallback timeout
};
})();
}
[/code]
To use this function we need to create an animation loop. Also if we separate our animated elements from our static elements (e.g. background) into different canvases, we only need to redraw the static elements when they change which is far less frequently.
For this we create two functions renderStatic and renderAnim; which are outside the scope of this article, but there are plenty of canvas examples to draw on. When the static elements require redrawing we just set the requiresRedraw variable to true.
Putting this altogether we end up with a animation loop looking similar to the following:
[code lang=”javascript” title=”Setting up animation callback”]
var isAnimating = false; // Is animation on or off?
var animateRunning = false; // Are we in the animation loop?
var requiresRedraw = true; // Do the static elements need to be redrawn?
function StartAnimating() { // Start animating/drawing
isAnimating = true;
if (!animateRunning) Draw(); // Only draw if we are not already drawing
}
function StopAnimating() { // Stop animating/drawing
isAnimating = false;
}
function Draw() {
if (isAnimating) { // Only draw if we are drawing
animateRunning = true;
try {
if (requiresRedraw) {
requiresRedraw = false;
renderStatic(); // function defined elsewhere
// which draws static elements
}
renderAnim(); // function defined elsewhere
// which draws animated elements
} catch (e) {
if (window.console && window.console.log)
window.console.log(e); // for debugging
}
requestAnimationFrame(Draw);
animateRunning = false;
}
}
[/code]
To start the drawing we can use StartAnimating() and to stop we can use StopAnimating()
Following this pattern should help you improve the performance of your HTML5 canvas app – while also reducing the load on your user’s computer. A double benefit!
