Водопад на Canvas

<div id="container">
  <canvas id="waterfall"></canvas>
</div>

<style>
body {
  background: #222;  
}

#container {
  box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;
  height: 140px;
  left: 50%;
  margin: -70px 0 0 -60px;
  position: absolute;
  top: 50%;
  width: 120px;
}

canvas {
  display: block;
  margin: 0 auto;
}
</style>

<script>
  var waterfallCanvas = function(c, cw, ch){
   
  var _this = this;
  this.c = c;
  this.ctx = c.getContext('2d');
  this.cw = cw;
  this.ch = ch;  
   
  this.particles = [];
  this.particleRate = 6;
  this.gravity = .15;
   

  this.init = function(){  
  this.loop();
  };
   
  this.reset = function(){  
  this.ctx.clearRect(0,0,this.cw,this.ch);
  this.particles = [];
  };
   
  this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
   

  this.Particle = function(){
  var newWidth = _this.rand(1,20);
  var newHeight = _this.rand(1, 45);
  this.x = _this.rand(10+(newWidth/2), _this.cw-10-(newWidth/2));
  this.y = -newHeight;
  this.vx = 0;
  this.vy = 0;
  this.width = newWidth;
  this.height = newHeight;
  this.hue = _this.rand(200, 220);
  this.saturation = _this.rand(30, 60);
  this.lightness = _this.rand(30, 60);
  };
   
  this.Particle.prototype.update = function(i){
  this.vx += this.vx;  
  this.vy += _this.gravity;
  this.x += this.vx;
  this.y += this.vy;  
  };
   
  this.Particle.prototype.render = function(){  
  _this.ctx.strokeStyle = 'hsla('+this.hue+', '+this.saturation+'%, '+this.lightness+'%, .05)';
  _this.ctx.beginPath();
  _this.ctx.moveTo(this.x, this.y);
  _this.ctx.lineTo(this.x, this.y + this.height);
  _this.ctx.lineWidth = this.width/2;
  _this.ctx.lineCap = 'round';
  _this.ctx.stroke();
  };
   
  this.Particle.prototype.renderBubble = function(){  
  _this.ctx.fillStyle = 'hsla('+this.hue+', 40%, 40%, 1)';
  _this.ctx.fillStyle = 'hsla('+this.hue+', '+this.saturation+'%, '+this.lightness+'%, .3)';
  _this.ctx.beginPath();
  _this.ctx.arc(this.x+this.width/2, _this.ch-20-_this.rand(0,10), _this.rand(1,8), 0, Math.PI*2, false);
  _this.ctx.fill();
  };
   
  this.createParticles = function(){
  var i = this.particleRate;
  while(i--){
  this.particles.push(new this.Particle());
  }
  };
   
  this.removeParticles = function(){
  var i = this.particleRate;
  while(i--){
  var p = this.particles[i];
  if(p.y > _this.ch-20-p.height){
  p.renderBubble();
  _this.particles.splice(i, 1);
  }  
  }
  };
   
  this.updateParticles = function(){  
  var i = this.particles.length;  
  while(i--){
  var p = this.particles[i];
  p.update(i);  
  };  
  };
   
  this.renderParticles = function(){
  var i = this.particles.length;  
  while(i--){
  var p = this.particles[i];
  p.render();  
  };  
  };
   
  this.clearCanvas = function(){  
  this.ctx.globalCompositeOperation = 'destination-out';
  this.ctx.fillStyle = 'rgba(255,255,255,.06)';
  this.ctx.fillRect(0,0,this.cw,this.ch);
  this.ctx.globalCompositeOperation = 'lighter';
  };
   
  this.loop = function(){
  var loopIt = function(){  
  requestAnimationFrame(loopIt, _this.c);  
  _this.clearCanvas();  
  _this.createParticles();  
  _this.updateParticles();  
  _this.renderParticles();  
  _this.removeParticles();
  };
  loopIt();  
  };
   
  };
   
  var isCanvasSupported = function(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
  };
   
  var setupRAF = function(){
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
  window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  };
   
  if(!window.requestAnimationFrame){
  window.requestAnimationFrame = function(callback, element){
  var currTime = new Date().getTime();
  var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
  lastTime = currTime + timeToCall;
  return id;
  };
  };
   
  if (!window.cancelAnimationFrame){
  window.cancelAnimationFrame = function(id){
  clearTimeout(id);
  };
  };
  };  
   
  if(isCanvasSupported()){
  var c = document.getElementById('waterfall');
  var cw = c.width = 100;
  var ch = c.height = 140;  
  var waterfall = new waterfallCanvas(c, cw, ch);  
  setupRAF();
  waterfall.init();
  }
</script>