​

This example was running 6 frames/second at the end of 2010... Notice the use of the

requestAnimFrame method for doing the animation, instead of the standard setInterval(...) 

method. RequestAnimatiuonFrame(..) will free ressources if the canvas is not visible.<p>

​

<canvas id="demo" width="700" height="350">

    <span class="ko">&lt;canvas&gt; not supported !</span>

</canvas>

<script>

  // generic way to set animation up

  window.requestAnimFrame = (function(callback){

    return window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    window.mozRequestAnimationFrame ||

    window.oRequestAnimationFrame ||

    window.msRequestAnimationFrame ||

    function(callback){

        window.setTimeout(callback, 1000 / 60);

    };

})();

    var context = document.getElementById("demo").getContext("2d");

    var lastX = context.canvas.width * Math.random();

    var lastY = context.canvas.height * Math.random();

    var hue = 0;

  // each function that is going ti be run as an animation should end by

  // asking again for a new frame of animation

    function line() {

        context.save();

        context.translate(context.canvas.width/2, context.canvas.height/2);

        context.scale(0.9, 0.9);

        context.translate(-context.canvas.width/2, -context.canvas.height/2);

        context.beginPath();

        context.lineWidth = 5 + Math.random() * 10;

        context.moveTo(lastX, lastY);

        lastX = context.canvas.width * Math.random();

        lastY = context.canvas.height * Math.random();

        context.bezierCurveTo(context.canvas.width * Math.random(),

                                  context.canvas.height * Math.random(),

                                  context.canvas.width * Math.random(),

                                  context.canvas.height * Math.random(),

                                  lastX, lastY);

        hue = hue + 10 * Math.random();

        context.strokeStyle = "hsl(" + hue + ", 50%, 50%)";

        context.shadowColor = "white";

        context.shadowBlur = 10;

        context.stroke();

        context.restore();

      // request new frame, passing itself (the line function) as a parameter

      // to request animFrame

    requestAnimFrame(function(){

        line();

    });

    }

  // same apply it, ends by a call for a new animation frame.

    function blank() {

        context.fillStyle = "rgba(0,0,0,0.1)";

        context.fillRect(0, 0, context.canvas.width, context.canvas.height);

      // request new frame

    requestAnimFrame(function(){

        blank();

    });

    }

  line();

  blank();

  //setInterval(blank, 40);

</script>   

​

​