fillano/gist:1033092

## gistfile1.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<style>
  div {
    background: #AACCEE;
    border: solid 1px #336699;
    margin: 10px;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    text-align: center
  }
  canvas {
    cursor: pointer;
  }
</style>
<body><div>test</div><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div>
<script type="text/javascript">
(function(){
  var canvas = document.getElementById("a_canvas");
  var ctx = canvas.getContext("2d");
  var a= "red";
  var b= "yellow";
  var c= "#AACCEE";
  var d= "rgba(170,204,238,0)";
  var balls = [];
  setInterval(render, 300);
  canvas.onclick = function(e){
    balls.push({
      startX : e.pageX-e.currentTarget.offsetLeft,
      startY : e.pageY-e.currentTarget.offsetTop,
      i : 0
    });
  }
  function render() {
    for(var i=0; i<balls.length; i++) {
      drawBall(i);
    }
  }
  function drawBall(idx){
    var r = 10+balls[idx].i*2;
    var g = ctx.createRadialGradient(balls[idx].startX, balls[idx].startY, balls[idx].i+3, balls[idx].startX, balls[idx].startY, r);
    g.addColorStop(0,   a);
    g.addColorStop(0.7, b);
    g.addColorStop(0.9, c);
    g.addColorStop(1.0, d);
    ctx.fillStyle = g;
    ctx.fillRect(
      (balls[idx].startX-r)>0?balls[idx].startX-r:0,
      (balls[idx].startY-r)>0?balls[idx].startY-r:0,
      (balls[idx].startX+r)<800?balls[idx].startX+r:800,
      (balls[idx].startY+r)<800?balls[idx].startY+r:800
    );
    balls[idx].i+=5;
    if(balls[idx].i>70){
    	ctx.save();
    	ctx.globalCompositeOperation = "xor";
      ctx.fillRect(
        (balls[idx].startX-r)>0?balls[idx].startX-r:0,
        (balls[idx].startY-r)>0?balls[idx].startY-r:0,
        (balls[idx].startX+r)<800?balls[idx].startX+r:800,
        (balls[idx].startY+r)<800?balls[idx].startY+r:800
      );
    	ctx.restore();
    	balls.shift();
    }
  }
}());
</script>
</body></html>
	<!DOCTYPE html>
	<html><head><meta charset="utf-8"></head>
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;
	border-radius: 5px;
	display: inline-block;
	text-align: center
	}
	canvas {
	cursor: pointer;
	}
	</style>
	<body><div>test</div><div id="container"><canvas id="a_canvas" width="800" height="800"></canvas></div>
	<script type="text/javascript">
	(function(){
	var canvas = document.getElementById("a_canvas");
	var ctx = canvas.getContext("2d");
	var a= "red";
	var b= "yellow";
	var c= "#AACCEE";
	var d= "rgba(170,204,238,0)";
	var balls = [];
	setInterval(render, 300);
	canvas.onclick = function(e){
	balls.push({
	startX : e.pageX-e.currentTarget.offsetLeft,
	startY : e.pageY-e.currentTarget.offsetTop,
	i : 0
	});
	}
	function render() {
	for(var i=0; i<balls.length; i++) {
	drawBall(i);
	}
	}
	function drawBall(idx){
	var r = 10+balls[idx].i*2;
	var g = ctx.createRadialGradient(balls[idx].startX, balls[idx].startY, balls[idx].i+3, balls[idx].startX, balls[idx].startY, r);
	g.addColorStop(0, a);
	g.addColorStop(0.7, b);
	g.addColorStop(0.9, c);
	g.addColorStop(1.0, d);
	ctx.fillStyle = g;
	ctx.fillRect(
	(balls[idx].startX-r)>0?balls[idx].startX-r:0,
	(balls[idx].startY-r)>0?balls[idx].startY-r:0,
	(balls[idx].startX+r)<800?balls[idx].startX+r:800,
	(balls[idx].startY+r)<800?balls[idx].startY+r:800
	);
	balls[idx].i+=5;
	if(balls[idx].i>70){
	ctx.save();
	ctx.globalCompositeOperation = "xor";
	ctx.fillRect(
	(balls[idx].startX-r)>0?balls[idx].startX-r:0,
	(balls[idx].startY-r)>0?balls[idx].startY-r:0,
	(balls[idx].startX+r)<800?balls[idx].startX+r:800,
	(balls[idx].startY+r)<800?balls[idx].startY+r:800
	);
	ctx.restore();
	balls.shift();
	}
	}
	}());
	</script>
	</body></html>