requestAnimationFrame
is similar to setInterval, it but has these important improvements:
Device displays will refresh about 60 times per second so requestAnimationFrame can continuously redraw at about 60 “frames” per second. The eye sees motion at 20-30 frames per second so requestAnimationFrame can easily create the illusion of motion.
Notice that requestAnimationFrame is recalled at the end of each animateCircle. This is because each ’requestAnimatonFrameonly requests a single execution of the animation function.
Example: simple `requestAnimationFrame
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// start the animation
requestAnimationFrame(animate);
function animate(currentTime){
// draw a full randomly circle
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var radius=10+Math.random()*15;
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2);
ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16);
ctx.fill();
// request another loop of animation
requestAnimationFrame(animate);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=512 height=512></canvas>
</body>
</html>
To illustrate the advantages of requestAnimationFrame this stackoverflow question has a live demo