HTML canvas rounded image draw under clipping area

canvas_rounded_image.js

// save the context in its unaltered state
ctx.save();

// fill canvas with black
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);

// create clipping region which will display portion of image
// The image will only be visible inside the circular clipping path
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2);
ctx.closePath();
ctx.clip();

// draw the image into the clipping region
ctx.drawImage(img,0,0);

// restore the context to its unaltered state
ctx.restore();