var canv = document.getElementById('canv'),
ctx = canv.getContext('2d');
var x = 10,
y = 10;
var dx = 1,
dy = 3;
var running = false;
var anim;

var fps = 60;
var delay = 1000 / 60;

function draw() {
    ctx.clearRect(0, 0, canv.width, canv.height);
    ctx.save();
    ctx.translate(x, y);
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

function move() {
    x += dx;
    y += dy;

if (x >= canv.width || x <= 0) {
    dx = -dx;
}
if (y <= 0 || y >= canv.height) {
    dy = -dy;
}
}
var start = 0;

(function animate() {
    running = true;
    var current = new Date().getTime(),
    delta = current - start;

if (delta >= delay) {
    move();
    draw();
    start = new Date().getTime();
}

anim = requestAnimationFrame(animate);
})();

window.addEventListener('click', function() {
    if (running == true) {
    cancelAnimationFrame(anim);
    running = false;
} else {
    anim = requestAnimationFrame(animate);
    running = true;
}
});

function animate() {
    running = true;
    var current = new Date().getTime(),
        delta = current - start;

    if (delta >= delay) {
        move();
        draw();
        start = new Date().getTime();
    }

    anim = requestAnimationFrame(animate);
}
animate();

function animate() {
    ...
    window.animation = requestAnimationFrame(animate);
};
animate();