rain

by easter bunny

HTML

<canvas id="mycanvas" ></canvas>

JavaScript

function makeit(){
var xpos=[];
var ypos=[];

var audio=new Audio();
audio.src="thunder.mp3";
audio.play();
audio.loop=true;

var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
for(i=0;i<canvas.width;i++){
xpos[i]=Math.floor((Math.random()*600)+1);
ypos[i]=Math.floor((Math.random()*500)+1);
}
var a=10;
var m=setInterval(function(){
   for(i=0;i<ypos.length;i++){
     ypos[i]=ypos[i]+3;
	  if(ypos[i]>canvas.width){
   ypos[i]=0;
   }
 
	} 
  
   drawcanvas();},10);


drawcanvas();

function drawcanvas(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
canvas.width=500;
canvas.height=500;
canvas.style.border="1px solid black";
ctx.fillStyle="#0066CC";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fill();
drawhill();

drawdrops(xpos,ypos,a);
drawclouds();


}
function drawhill(){
ctx.beginPath();
ctx.fillStyle="green";
ctx.moveTo(0,canvas.height);
ctx.lineTo(0,canvas.height-20);
ctx.lineTo(canvas.width,canvas.height-20);
ctx.lineTo(canvas.width,canvas.height);
ctx.closePath();
ctx.fill();
ctx.fillStyle="brown";
ctx.beginPath();
ctx.moveTo(0,canvas.height-20);
ctx.lineTo(170,canvas.height-100);
ctx.lineTo(210,canvas.height-60);
ctx.lineTo(300,canvas.height-150);
ctx.lineTo(400,canvas.height-30);
ctx.lineTo(450,canvas.height-70);
ctx.lineTo(500,canvas.height-20);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.fillStyle="white";
ctx.moveTo(300,canvas.height-150);
ctx.lineTo(324,canvas.height-120);
ctx.lineTo(270,canvas.height-120);
ctx.closePath();
ctx.fill();

}
function drawclouds(){
ctx.beginPath();
ctx.fillStyle="#669999";
ctx.arc(289,0,89,0,Math.PI);
ctx.arc(210,0,60,0,Math.PI);
ctx.arc(160,0,78,0,Math.PI);
ctx.arc(90,0,60,0,Math.PI);
ctx.arc(32,0,60,0,Math.PI);
ctx.arc(375,0,65,0,Math.PI);
ctx.arc(436,0,100,0,Math.PI);


ctx.fill();
}

function drawdrops(x,y,a){
for(i=0;i<x.length;i++){
 ctx.beginPath();
 ctx.fillStyle="#CCFFFF";
 ctx.arc(x[i],y[i],5,0,Math.PI);
 ctx.moveTo(x[i]-5,y[i]);
 ctx.lineTo(x[i],y[i]-a);
...