ball.js

var canvas = document.getElementById('main');
var c = canvas.getContext('2d');

function drawBall(x, y) {
    c.beginPath();
    c.arc(x, y, 10, 0, 2* Math.PI);
    c.fill();
}

var x = 0;
var y = 0;
var vx = 9;
var vy = 4;

function draw() {
    c.clearRect(0, 0, 400, 300);
    drawBall(x, y);
    if ((x + vx) > 400) {
      x = 400 - (x + vx - 400);
      vx = -vx;
    } else if ((x + vx) < 0) {
      x = 0 - (x + vx);
      vx = -vx;
    } else {
      x = x + vx;
    }
    if ((y + vy) > 300) {
      y = 300 - (y + vy - 300);
      vy = -vy;
    } else if ((y + vy) < 0) {
      y = 0 - (y + vy);
      vy = -vy;
    } else {
      y = y + vy;
    }
}

setInterval(draw, 1000 / 30);