Pasted

 
<html>
    <head>
        <title>HTML5 Canvas</title>
        <style>
            
            * { padding:0; margin:0; }
            body { overflow:hidden; }
            
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            
            $(function() {
                
               var canvas = document.getElementById("canvas");
               var ctx = canvas.getContext("2d");
               
               var W = $(document).width();
               var H = $(document).height();
               
               canvas.width = W;
               canvas.height = H;
               
               var parts = [];
               var dir_x = ranInt(-10,10);
               
               function Rain() {
                   this.x = ranInt(0,W);
                   this.y = 0;
                   this.s = ranInt(5,10);
                   this.c = "rgba(255,255,255,1)";
                   this.sx = 0;
                   this.sy = ranInt(2,4) * ranInt(1,10);
               }
               
               function Draw() {
                   
                   ctx.globalCompositeOperation = "source-over";
                   ctx.fillStyle = "rgba(0,0,0,1)";
                   ctx.fillRect(0,0,W,H);
                   ctx.globalCompositeOperation = "lighter";
                   
                   for(var i = 0; i < parts.length; i++) {
                       
                       var p = parts[i];
                       
                       //draw particle
                       ctx.beginPath();
                       ctx.arc(p.x, p.y, p.s, 0, Math.PI * 2);
                       ctx.fillStyle = p.c;
                       ctx.fill();
                       
                       //update particle
                       parts[i].x += dir_x;
                       parts[i].y += p.sy;
                       
                       if(p.y > H - p.s || p.x > W - p.s || p.x < 0) {
                           console.log(i + " is over the border, removing index");
                           parts[i] = new Rain();
                       } 
                       
                   }
                   
                   /* debug purposes */
                   ctx.fillStyle = "rgba(255,255,255,1)";
                   ctx.font = "24px Arial";
                   var debug = [
                       "parts.length: " + parts.length,
                       "dir_x: " + dir_x
                       ];
                   var h = 40;
                   for(i = 0; i < debug.length; i++) {
                       ctx.fillText(debug[i], 20, h*(i+1));
                   }
                   
               }
               
               function CreateParticle() {
                   
                   if(parts.length != 100)
                   parts.push(new Rain());
                   
               }
               
               setInterval(Draw, 33);
               setInterval(CreateParticle, 100);
               setInterval(function() {
                   
                   dir_x += ranInt(-2,2);
                   
                   if(dir_x > 10) {
                       dir_x -= ranInt(3,7);
                   }
                   if(dir_x < -10) {
                       dir_x += ranInt(3,7)
                   }
                   
               }, 500);
               
               
               /* Other important functions */
               function ranInt(Min, Max) {
                   return Math.floor(Math.random() * (Max-Min) + Min);
               }
            });
            
        </script>
        
    </head>
    
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>