Use requestAnimationFrame NOT setInterval for animation loops

suggest change

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>
    body{ background-color:white; }
    #canvas{border:1px solid red; }

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    // start the animation

    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;

        // request another loop of animation

}); // end $(function(){});
    <canvas id="canvas" width=512 height=512></canvas>

To illustrate the advantages of requestAnimationFrame this stackoverflow question has a live demo

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents