window.onload = function(){
    var canvasWidth = 800;
    var canvasHeight = 600;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    var image = new Image();
    var clippingRegion = {x:400,y:200,r:50};
    image.src = "img/293731.jpg";
    image.onload = function (e) {
        initCanvas();
        //context.drawImage(image,0,0);
    }
    //
    function initCanvas(){
        draw(Image,clippingRegion);
    }
    function setCliippingRegion(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();
        setCliippingRegion(clippingRegion);
        context.drawImage(image,0,0);
        context.restore();
    }
}