Script

var canvas = document.querySelector('#c1');
var ctx = canvas.getContext('2d');
var w = 300;
var h = 200;
canvas.width = w;
canvas.height = h;
var circles = [];
    for(var a = 0; a < 50; a++){
circles.push({
	"px":w/2,
	"py":h/2,
	"vx":5-10*Math.random(),
	"vy":5-10*Math.random(),
	"r":10,
	"pi":Math.PI*2
});
}
var x = circles;	
function draw(){
	setInterval(function(draw){
	ctx.clearRect(0,0,w,h);
	ctx.fillStyle = "black";	
	ctx.fillRect(0,0,w,h);
	ctx.fill();
	
	for(var i=0;i<50;i++){
	ctx.beginPath();
	ctx.fillStyle = "#f80";	
	ctx.arc(x[i].px,x[i].py,x[i].r,0,x[i].pi,false);
	ctx.fill();
	x[i].px += x[i].vx;
	x[i].py += x[i].vy;		
		if(x[i].px+x[i].vx+x[i].r>=w){
		   x[i].vx = -x[i].vx;
		}
		if(x[i].py+x[i].vy+x[i].r>=h){
		   x[i].vy = -x[i].vy;
		}
		if(x[i].px-x[i].r<=0){
		   x[i].vx = -x[i].vx;
		}
		if(x[i].py-x[i].r<=0){
		   x[i].vy = -x[i].vy; 
    	}	
  }
},50);	
}
draw();