Edit in JSFiddle

var Stage = function( sel ){
    console.clear();
		this.canvas = document.querySelector(sel);
    this.ctx = this.canvas.getContext('2d');
    this.w = 0;
    this.h = 0;
    
    // on resize
    var self = this;
    window.addEventListener('resize',function(){ self.updateDimensions() })
    this.updateDimensions();
}

Stage.prototype.updateDimensions = function(){
	var styles = window.getComputedStyle(this.canvas);
    this.w = parseInt(styles.width, 10);
    this.h = parseInt(styles.height, 10);
    this.canvas.width = this.w;
    this.canvas.height = this.h;
}

Stage.prototype.start = function(){
	var self = this;
  (function animationloop(){
    requestAnimationFrame(animationloop);
    self.step();
  })();
}

Stage.prototype.step = function(){
	this.update(this.ctx);
  this.render(this.ctx);
}

Stage.prototype.update = function(){
	this.fooX = this.fooX+1 || 0;
}

Stage.prototype.render = function(){
	this.ctx.fillRect(this.fooX, 0, 10, 10)
}

var Ball = function(ctx,speed){
	this.ctx = ctx;

  this.speed = speed;
	this.reset();
}

Ball.prototype.reset = function(){
	this.x = this.ctx.canvas.width * Math.random();
  this.y = this.ctx.canvas.height * Math.random();
  this.color = 'rgba('+ (255*Math.random()|0) + ', '+ (255*Math.random()|0) + ', '+ (255*Math.random()|0) + ', '+ 1 + ')';
  //console.log(this.color)
	this.alpha = 0.5;
  this.size = 0;
}

Ball.prototype.update = function(ctx){
	this.size+=0.2;
  this.alpha -= 0.001 * this.speed;
  if(this.alpha <= 0){
  	this.reset();
  }
}

Ball.prototype.render = function(ctx){
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
  /*ctx.ellipse(
  	this.x, 
    this.y, 
    this.size+10*Math.sin(this.size/10), 
    this.size+10*Math.cos(this.size/10), 
    1 * Math.PI/180, 
    0, 
    2 * Math.PI
  );*/
  ctx.fillStyle = this.color;
  
  ctx.globalAlpha = this.alpha;
  ctx.fill();
}

var Billboard = function(){
	Stage.apply(this, arguments);
  this.bodies = [];
  for(var i = 0; i < 200; i++){
  	this.bodies.push(new Ball(this.ctx, 1+Math.random()));
  }
  
}

Billboard.prototype = Object.create(Stage.prototype);
Billboard.prototype.contructor = Billboard;

Billboard.prototype.update = function(ctx){
	this.bodies.forEach(function(body){
  	body.update(ctx);
  });
}

Billboard.prototype.render = function(ctx){
	ctx.clearRect(0,0,this.w,this.h);
	this.bodies.forEach(function(body){
  	body.render(ctx);
  });
}

new Billboard('#c').start();
<canvas id="c"></canvas>
html, body { height: 100%; }
body { background: #ccc; margin: 0; }
canvas { width: 100%; height: 100%; outline: 1px solid red; display: block; background: #333; }