<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<style>
	  *{
	  	margin:0;
	  	padding:0;
	  }
		#blue-div{
			width:400px;
			height:460px;
			margin:0 auto;
			position: relative;
		}
		#blue-image{
			display:block;
			width:400px;
			height:460px;
			margin:0 auto;
			filter:blur(5px);
			position: absolute;
			left:0px;
			top:0px;
			z-index: 0;
		}
		#canvas{
			display: block;
			margin: 0  auto;
			position: absolute;
			left:0;
			top:0;
			z-index: 500;
			/* background-color:red; */
		}
		.button{
			display:block;
			position: absolute;
			z-index: 1000;
			width:50px;
			height:20px;
			color:white;
			text-decoration: none;
			text-align: center;
			line-height: 20px;
			border-radius: 5px;
		}
		#reset-button{
			left:100px;
			bottom:10px;
			background-color:#058;
		}
		#reset-button:hover{
			background-color:#047;
		}
		#show-button{
			right:100px;
			bottom:10px;
			background-color:#085;
		}
		#show-button{
			background-color:#074;
		}
	</style>
</head>
<body>
	<div id='blue-div'>
		<img id='blue-image' src="luhan.jpg" >
		<canvas id='canvas'></canvas>
		<a href="javascript:reset()" class='button' id='reset-button'>Reset</a>
		<a href="javascript:show()" class='button' id='show-button'>Show</a>
	</div>
	
</body>
<script>
	var canvasWidth=400;
	var canvasHeight=460;
	var canvas=document.getElementById('canvas');
	canvas.width=canvasWidth;
	canvas.height=canvasHeight;
	var ctx=canvas.getContext("2d");
	var radius=20;
	var clippingRegion={x:-1,y:1,r:radius};

	var image=new Image();
	image.src='luhan.jpg';
	image.onload=function(e){
		initCanvas()
	}

	function initCanvas(){
		clippingRegion=clippingRegion={x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius};
		draw(image,clippingRegion)
	}
	function setClippingRegion(clippingRegion){
		ctx.beginPath();
		ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r,0,2*Math.PI,true)
		ctx.clip();
	}
	function draw(image,clippingRegion){
		ctx.clearRect(0, 0,canvas.width,canvas.height);
		ctx.save();
		setClippingRegion(clippingRegion);
		ctx.drawImage(image,0,0); 
		ctx.restore();
	}
	function show(){
		
		var id=setInterval(function(){
			clippingRegion.r+=20;
			if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
            clearInterval(id);
			}
			draw(image,clippingRegion);

		}, 30)
	}
	function reset(){
		initCanvas()
	}
</script>
</html>