<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo" style="background-color:#000"></canvas>
<script>
var c=document.getElementById('demo');
var ctx=c.getContext("2d");
window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);
setInterval(draw,30);
function setDimensions() {
c.width=window.innerWidth;
c.height=window.innerHeight;
ctx.shadowBlur=5;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowColor="black";
};
var arcs=[ ];
function draw() {
var arc = {
xPos:Math.floor(Math.random() * c.width),
yPos:Math.floor(Math.random() * c.height),
radius:0,
stopAnimation:Math.floor(Math.random()*600 + 20)
};
arcs.push(arc);
for (i = 0; i < arcs.length; i++) {
var blob=arcs[i];
if (blob.radius>blob.stopAnimation) {
arcs.splice(blob,1);
}
else
{
var grd=ctx.createRadialGradient(blob.xPos,blob.yPos,blob.radius,blob.xPos,blob.yPos,0);
grd.addColorStop(1,"deepskyblue");
grd.addColorStop(0,"blue");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(blob.xPos, blob.yPos, blob.radius, 0, Math.PI * 2);
ctx.fill();
blob.radius++;
};
};
//label
ctx.fillStyle="#000";
ctx.fillRect(c.width/2-100,c.height/2-45,200,75);
ctx.fillStyle="white"
ctx.font="20pt Arial";
ctx.textAlign="center";
ctx.fillText("waterDrops",c.width/2,c.height/2);
//end label
};
</script>
</body>
</html>