single drop

by easter bunny

HTML

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

<input type="button" value="drops" onClick="drop(10,10);">

JavaScript

function drop (x,y){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.style.border="1px solid black";

ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);


ctx.fillStyle="orange";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fill();

ctx.restore();


ctx.fillStyle="red";
ctx.moveTo(x-5,y);
ctx.lineTo(x,y-7);
ctx.lineTo(x+5,y);
ctx.arc(x,y,5,0,Math.PI);

ctx.closePath();

ctx.fill();

y=y+3;
if(y==canvas.height){
y=0;
}

var m = setTimeout('drop('+x+','+y+')',20);

}

 drop(10,10);