Mouse Follower

an HTML5 Mouse Follower with exponential ease out

HTML

<canvas id="myCanvas" width=320 height=240></canvas>
<br/>
<input id="dx"/>dx
<input id="dy"/>dy

CSS

canvas{
    outline: 2px solid black;
    background: #BABADD;
}

JavaScript

c = document.getElementById("myCanvas");
c_con = c.getContext("2d");
var mouse,
    f = { x: 0, y: 0},
    active = false,
    msRefresh = 15,
    speed = 2; // 1-10
speed = speed < 1 ? 1 : speed > 10 ? 10 : speed;

mAbsPos = function(e) {
    var xLim = c.width + c.offsetLeft,yLim = c.height + c.offsetTop;
    var m = { x: e.pageX - c.offsetLeft, y: e.pageY - c.offsetTop};
    m.x = m.x < 0 ? 0 : m.x; m.y = m.y < 0 ? 0 : m.y;
    m.x = m.x > xLim ? xLim : m.x; m.y = m.y > yLim ? yLim : m.y;
    mouse = m;
};

drawTrail = function() {
    
    active = true;
    c.width += 0; //clear canvas
    dx = Math.round(mouse.x - f.x);
    dy = Math.round(mouse.y - f.y);
    if (dx !== 0 || dy !== 0) {
        f.x += dx * 0.1 * speed / 3;
        f.y += dy * 0.1 * speed / 3;
    }
    document.getElementById("dx").value = dx;
    document.getElementById("dy").value = dy;

    c_con.beginPath();
    c_con.arc(f.x, f.y, 10, 0, 2 * Math.PI, false);
    c_con.closePath();
    c_con.stroke();
    c_con.fill();

    setTimeout(function() {drawTrail();}, msRefresh);
};

moveHandle = function(e) {
    mAbsPos(e);
    if (!active) {
        drawTrail();
    }
};
window.addEventListener("mousemove", moveHandle, false);