Cut circular image in canvas

Question

I use html5 canvas and I create a game, it would be possible to load your face into the game and use it as the main character. Unfortunately, the symbols in the game are circular, like emoticons.

So how to do this?

Is it possible to take a picture and cut out a circle from it so that everything outside the circle is transparent? If so, how will this be done?

Answer 1

You want to make a clipping path. This path will cut everything outside the 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 you draw on this canvas will only appear inside the clipping path.

You want to save and restore the context before and after.

Here's a little more on the topic:

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