<canvas id='canvas'></canvas>

;(function (w, r) {
    w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');
 
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
var ease = 0.1;
var ballPosition = {x:0, y:0};
var e = undefined;
 
context.fillStyle = 'rgb(255,0,0)';
 
function arc () {
    context.beginPath();
    context.arc(ballPosition.x, ballPosition.y, 15, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
};
 
function draw () {
    if (e == undefined) {
        return;
    };
    context.clearRect(0,0,canvas.width,canvas.height);
    var x = y = 0;
    x = e.clientX - canvas.offsetLeft;
    y = e.clientY - canvas.offsetTop;
 
    ballPosition.x += (x - ballPosition.x) * ease;
    ballPosition.y += (y - ballPosition.y) * ease;
    arc();
};
 
function loop(){
    draw();
    requestAnimationFrame(loop);
};
 
function onMousemove (event) {
    e = event;
};
 
function init () {
    ballPosition.x = canvas.width * 0.5;
    ballPosition.y = canvas.height * 0.5;
    arc();
    window.addEventListener('mousemove', onMousemove, false);
    loop();
};
init();

var requestAnimationFrame = new function () {
    var s = 'equestAnimationFrame',
        w = window,
        r = w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r];
 
    return function (callback) {
        if (r) {
            return r(callback);
        };
        setTimeout(callback, 1000 / 60);
    };
};