var canWidth = 1500;

var canHeight = 800;

var can =  document.getElementById('canvas');

var cxt = can.getContext('2d');

var clipArea = {x:750,y:400,r:80};

var img = new Image();

window.onload = function(){

initCanvas();

}

can.width = canWidth;

can.height = canHeight;

img.src = "img/fpic410.jpg";

img.onload = function(e){

initCanvas()

}

function initCanvas(){

draw(img);

}

function setClipArea(clipArea){

cxt.beginPath();

cxt.arc(clipArea.x,clipArea.y,clipArea.r,0,Math.PI*2,true);

cxt.clip();

}

function draw(image,clipArea){

cxt.clearRect(0,0,can.width,can.height);

cxt.save();

setClipArea(clipArea);

cxt.drawImage(img,0,0);

cxt.restore();

}