This is my attempt to create a demo using less than 1 KB of JavaScript. It was an attempt for JS1K entry.
Because of textBaseline property, it conflicts with translate function so the old code doesn't work anymore:
var e=[10,110,210,310],w=h=400,W=H=200,f=0,g=100,h=50/3,i=1000;c.width=c.height=w;for(P in a)a[P[0]+P[P.length>>1]+P[P.length-1]]=a[P];setInterval(function(){with(a){if(f>g)f=0;f+=h/i*g;tse(W,H);A=function(C,e){fillStyle='#'+'0DF4DF9DF'.substr(C*3,3);e&&bnh(),arc(0,0,e,0,7),ceh(),fll();};A(0,w+h);for(var Z=e.length-1;Z>=0;){var r=e[Z--]+f;A(0,r+10);A(1,r+5);A(2,r);A(1,r-5);A(0,r-10)}tse(-W,-H);tse(W,f/g*H|0);A(2,10);tse(-W,-(f/g*H|0))}},h);
Below is the revised code. I changed the hash function to make sure that functions I used don't conflict each other.
var e=[10,110,210,310],w=h=400,W=H=200,f=0,g=100,h=50/3,i=1000;c.width=c.height=w;for(P in a)a[P[0]+(P[6]||'')+P[P.length-1]]=a[P];setInterval(function(){with(a){if(f>g)f=0;f+=h/i*g;tae(W,H);A=function(C,e){fillStyle='#'+'0DF4DF9DF'.substr(C*3,3);e&&bah(),arc(0,0,e,0,7),cah(),fl();};A(0,w+h);for(var Z=e.length-1;Z>=0;){var r=e[Z--]+f;A(0,r+10);A(1,r+5);A(2,r);A(1,r-5);A(0,r-10)}tae(-W,-H);tae(W,f/g*H|0);A(2,10);tae(-W,-(f/g*H|0))}},h);
Watch every drop of water drops