Canvas water drops

by Aditya

CSS

html,body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

JavaScript

var w = window,
    e = w.event,
    d = document,
    c = d.createElement("canvas"),
    ctx, objects = [],
    circle, wW = w.innerWidth,
    wH = w.innerHeight,
    clr = "rgba(0,0,0,0)",
    oRad;

var requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
})();

function animate() {
    ctx.clearRect(0, 0, wW, wH);
    for (var i = 0; i < objects.length; i++) {
        oRad = objects[i].r;
        ctx.fillStyle = "rgba(240,190,130," + objects[i].o + ")";
        ctx.beginPath();
        ctx.arc(objects[i].x, objects[i].y, oRad, 0, Math.PI * 2, true);
        objects[i].r *= 1.03;
        objects[i].o = wH/(objects[i].r*500);
        if (objects[i].o == 0){
          objects.splice(i, 1);
        }
        ctx.fill();
    }
    objects.splice(0,objects.length-50);
    requestAnimFrame(animate);
}

function getLoc(e) {
    var posx,posy;
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
        posy = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
    }
    objects.push( {
        x: posx,
        y: posy,
        r: 6,
        o: 0.9
    })
}

d.body.appendChild(c);

if (!c.getContext) {
    document.write('Your browser does not support canvas');
} else {
    ctx = c.getContext("2d");
    ctx.canvas.width = wW;
    ctx.canvas.height = wH;
    d.addEventListener('mousemove', getLoc, false);
    animate();
}