StackOverflow_17471241: Bounce velocity calculation, collision with ground

Illustration of the answer to: http://stackoverflow.com/questions/17471241/bounce-velocity-calculation-collision-with-ground

by Gustavo Carvalho

HTML

<button onclick="throwBall()">throw ball</button>
<canvas id="canvas" width=1100 height=600></canvas>

CSS

canvas {
    background-color: ivory;
    border:1px solid red;
}
button {
    position: absolute;
    left: 5;
    top: 5;    
}

JavaScript

//  robust requestAnimationFrame polyfill
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
(function () {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
        timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());

// --> Game Script:

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

var left = 0,
    top = 0,
    right = canvas.width,
    bottom = canvas.height;

var lastTime = 0,
    deltaTime = 0;

var gravity = 0.98,
    airDrag = 0.99,
    groundFriction = 0.98;


var ball = {
    radius: 80,
    elasticity: 0.8, // -> coefficient of restitution
    x: 30,
    y: 30,
    vx: 100, // initial velocity
    vy: 0,
    draw: function (ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'green';
        ctx.fill();
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#003300';
        ctx.stroke();
    }
};

// throw the ball with random vx velocity
function throwBall() {
    ball.x = 30;
    ball.y = 30;
    ball.vx = Math.random() * 150;
    ball.vy = 0;
}

function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function...