// shim layer with setTimeout fallback

window.requestAnimFrame = (function(){

    return  window.requestAnimationFrame       || 

        window.webkitRequestAnimationFrame || 

        window.mozRequestAnimationFrame    || 

        window.oRequestAnimationFrame      || 

        window.msRequestAnimationFrame     || 

        function(/* function */ callback, /* DOMElement */ element){

            return window.setTimeout(callback, 1000 / 60);

        };

})();

​

window.cancelRequestAnimFrame = ( function() {

    return window.cancelAnimationFrame            ||

        window.webkitCancelRequestAnimationFrame    ||

        window.mozCancelRequestAnimationFrame         ||

        window.oCancelRequestAnimationFrame        ||

        window.msCancelRequestAnimationFrame        ||

        clearTimeout;

} )();

​

// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/

​

var canvas, context;

var start = {y:0,x:0};

var end = {y:220,x:100};

var amount = 0;

var request;

var clickCount = true;

​

init(); 

​

function init() {

​

    canvas = document.createElement( 'canvas' );

    canvas.width = $(window).width();

    canvas.height = $(window).height();

​

    context = canvas.getContext( '2d' );

​

    document.body.appendChild( canvas );

    $('body').click(function(e) { 

      if(clickCount) {

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

        start.x = e.pageX;

        start.y = e.pageY;

        clickCount = false;

      } else {

        end.x = e.pageX;

        end.y = e.pageY;

        animate();

        clickCount = true;

      }

    });

}

​

function animate() {

    request = requestAnimFrame(animate, canvas);

    draw();

}

​

function draw() {

    console.log('running');

    amount += 0.05; // change to alter duration

    if (amount > 1) amount = 1;

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

    context.beginPath();

    context.moveTo(start.x, start.y); // a

    // lerp : a  + (b - a) * f

    var newX = start.x + (end.x - start.x) * amount;

    var newY = start.y + (end.y - start.y) * amount;

    console.log('newX - '+newX +' - '+'newY - '+newY);

    console.log('end.x - '+end.x+' - '+'end.y - '+end.y);

    context.lineTo(newX , newY);

    //context.lineTo(start.x + (end.x - start.x) * amount, start.y + (end.y - start.y) * amount);

    context.stroke();  

  if(newX === end.x && newY === end.y) { 

    cancelRequestAnimFrame(request); 

    console.log('fin');

    request = null;

    amount = 0;

  }

}

​

​