<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister">
body {padding:0px;margin:0px;}
<canvas id="demo"></canvas>
var c=document.getElementById('demo');
var cc=c.getContext("2d");

//it's a good idea to adapt the canvas' dimensions to the width of the screen
//it gives a responsive feel to the canvas
//this function is executed when the document loads AND when it's resized

setInterval(draw,1000/25); 	//25 frames/second is often referred to as a good framerate for animations

function setDimensions() {

var blobarray = [ ];

//array of colors
var colors = ["#606C38","#283618","#FEFAE0","#DDA15E","#BC6C25"];

function draw() {

	//if you uncomment the following line, only in the left half of the animation, the balls will leave traces
	//cc.clearRect(c.width/2,0,c.width/2,c.height) //removing this line will cause all balls to leave traces

	//create a JS object with some properties of the balls we will be drawing
	var blob = {
		x:Math.floor(Math.random() * c.width), // random location on x
		y:0, //start at the top
		color:colors[Math.floor(Math.random()*colors.length)], // random color from array "colors"
		size:10, //size of the radius of the drops
		ySpeed:Math.floor(Math.random() * 5) + 2  //speed at which the balls will fall down

	//add the object to a JS array
	//loop through the array of balls
	for (var i=0;i<blobarray.length;i++) {	

		if (blob.y>c.height)		
			//eventually, the browser will crash as we'll be adding balls, and never delete them
			//so, let's delete the ball when he's out of sight, that is: when his y-position is lower
			//than the screen's height
			blobarray.splice(i, 1);
			//draw the ball
			cc.arc(blob.x, blob.y, blob.size, 0, 2 * Math.PI);
			cc.fillStyle = blob.color;
			//make sure that in the next iteration, the ball will be drawn a little lower on the screen
	//let's add a little text to the canvas	
	cc.fillRect (30,30,130,60); //create a rectangle first!
	cc.font="2.2em Tangerine"; // set a Google font (Tangerine)!)
	cc.fillText ("random drops",40,67);
	//let's add the number of current moving drops using another Google font
	cc.fillRect (30,120,225,60); //create a rectangle first!
	cc.font="1.5em Love Ya Like A Sister"; // set a second Google font (Love Ya Like A Sister)
	cc.fillText ("Nmbr of drops: " + blobarray.length,42,156);