$("document").ready(function(){ var canvasWidth=500; var canvasHeight=350; var canvas=document.getElementById("blur-canvas"); var context=canvas.getContext("2d"); var radius=50; var clippingRegion={x:200,y:150,r:radius}; canvas.width=canvasWidth; canvas.height=canvasHeight; var image=new Image(); image.src="image.jpg"; image.onload=function(){ initCanvas(); }; function initCanvas(){ //clippingRegion={x:Math.random*radius*8+radius,y:Math.random*radius*5+radius,r:radius}; draw(image,clippingRegion); } function setClippingRegion(clippingRegion){ context.beginPath(); context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false); context.clip(); } function draw(image,clippingRegion){ context.clearRect(0,0,canvas.width,canvas.height); context.save(); setClippingRegion(clippingRegion); context.drawImage(image ,0,0); contex.restore(); } function reset(){ initCanvas(); } function show(){ clippingRegion.r=1000; draw(image,clippingRegion); }});