bounce.js

var Vector = function(x, y) {
  this.x = x;
  this.y = y;

  this.addInPlace = function(vector) {
    this.x += vector.x;
    this.y += vector.y;
    return this;
  }

  this.add = function(vector) {
    return new Vector(this.x + vector.x, this.y + vector.y);
  }
};

var Ball = function(x, y, radius, xVelocity, yVelocity) {
  this.position = new Vector(x, y);
  this.radius = radius;
  this.velocity = new Vector(xVelocity, yVelocity);
  this.acceleration = new Vector(0, 0.55);
  this.bounceFactor = 0.8;
  this.friction = 0.94;
  this.draw = function(context, delta) {
    if (this.position.add(this.velocity).x - this.radius <= 0) {
      this.position.x = this.radius;
      this.velocity.x = -this.velocity.x * this.bounceFactor;
    }
    if (this.position.add(this.velocity).x + radius >= context.canvas.width) {
      this.velocity.x = -this.velocity.x * this.bounceFactor;
    }
    if (this.position.add(this.velocity).y - this.radius <= 0) {
      this.velocity.y = -this.velocity.y;
    }
    if (this.position.add(this.velocity).y + radius >= context.canvas.height) {
      this.position.y = context.canvas.height - this.radius;
      this.velocity.y = -this.velocity.y * this.bounceFactor;
      this.velocity.x *= this.friction;
    }

    this.velocity.addInPlace(this.acceleration);
    this.position.addInPlace(this.velocity);


    context.beginPath();
    context.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2);
    context.closePath();
    context.fill();
  };

  this.drawVelocity = function(context) {
    context.beginPath();
    context.moveTo(this.position.x, this.position.y);
    context.lineTo(this.position.x + (this.velocity.x*100), this.y + (this.velocity.y*100));
    context.closePath();
    context.stroke();
  }
};


window.onload = function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.canvas.width = window.innerWidth;
  context.canvas.height = window.innerHeight;


  // Now we create an instance of the class
  var ball = new Ball(100, 150, 10, 6, -11);
  var ball2 = new Ball(100, 150, 15, 20, -7);

  var lastTimestamp;
  function render(timestamp) {
    var delta = timestamp - (lastTimestamp || timestamp);


    context.clearRect(0, 0, canvas.width, canvas.height);
    ball.draw(context, delta);
    ball2.draw(context, delta);
    lastTimestamp = timestamp;
    window.requestAnimationFrame(render);
  };

  //Finally, call our render function to start the animation
  render(new Date().getTime());
}

http://jsfiddle.net/zdcevdu2/2/