// JavaScript Document

//holds the drawing context of the canvas element

var width =400;
var height = 400;
var x = 200;
var y = 200;
var radius = 5;
var rad = radius;
var opacity = 0.2;
var opa = opacity;
 
 
 window.onload = function(){
	 
	var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

	setInterval(draw,60);

 
function draw() {
    clear();
 
    rectangle(0,0,width,height);
 
	if (rad>height/4){rad = radius; opa = opacity;}
	else {
	 rad = rad+4;
	 opa = opa-0.01;
	}

    circle(x,y,rad,opa);

}

 

function circle(x,y,rad,opa) {
    context.fillStyle = "rgba(255,255,255,"+opa+")";
    context.beginPath();
    context.arc(x,y,rad,0,2*Math.PI,true);
    context.closePath();
    context.fill();
}
 
function rectangle(x,y,w,h) {
    context.fillStyle= "rgba(0,102,153,0)";
}
 
function clear() {
    context.clearRect(0,0,400,400);
}
 
 }