Cut Out Circular Image In Canvas

I am useing html5 canvas, and I am creating a game were it is going to be possible to upload your face into the game, and use it as the main charactar. Unfortunately, the charactar

Solution 1:

You'll want to make a clipping path. This path will clip everything outside of a circle:

ctx.save();

ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.clip();

// draw the image

ctx.restore();

So the next thing(s) you draw on this canvas will only appear inside of the clipping path.

You'll want to save and restore the context before and afterwards.

Here's a bit more on the topic:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#Clipping_paths