The Bouncing Ball

The Code for this under the script tag

var context;
var x=100;
var y=200;
var dx=5;
var dy=5;

function init(){
 canvas=myCanvas;
 context= myCanvas.getContext('2d');
 setInterval(draw,10);
 bal=new bola('#007700', 17,dx,dy);
}

function draw(){
   context.clearRect(0,0, 300,300);
   bal.Pantul();
   bal.Create();
   bal.x+=bal.dx;
   bal.y+=bal.dy;
}

function bola(color, r,dx,dy){
     this.canvas  = canvas;
     this.context = canvas.getContext('2d');
     this.r  = r;
     this.x =Math.random()*400+30;
     this.y  = Math.random()*250+30;
     this.dx  = dx;
     this.dy  = dy;
     this.color   = color;
}

bola.prototype.Create = function (){
     this.context.beginPath();
     this.context.fillStyle = this.color;
     this.context.arc(this.x,this.y,this.r,0,Math.PI*2,false);
     this.context.fill();
}

bola.prototype.Pantul = function (){
 if (this.x >= (canvas.width - this.r) || this.x <= this.r) this.dx *= -1;
     if (this.y >= (canvas.height - this.r) || this.y <= this.r) this.dy *= -1; 
}

window.onload = function(){
        init()
}