How to crop an image in the shape of a circle, and then set it inside another image?

Question

I'm working on a pet search application, and I need to crop my pet's avatar into a small circle that will later be “merged” / merged with the outline, and then passed as a marker to google static maps. I want to do this in the interface, because to do this on the back-end it will be required (if the service will expand or increase too much), some more space management for images will be required.

This is the outline:

The result should look like this:

The profile image can be of any size larger than the outline, so they will have any shape (usually square or rectangular).

I am trying to figure out if I can do this completely on the interface. As far as I know, I can:

• Take a profile picture and paste it into the canvas
• Then we cut it in a circular shape (I don’t know how to do it)
• Convert it back to image (not sure if this is necessary)
• Add it to another canvas so that I can combine it with the outline
• Save it as an image, and then send it to static Google maps as a marker

I thought that if I made the borders of the canvas round (with a border radius of css), it could work, but it is not.

So, for the question itself, is it possible to crop the image into a circle only using JavaScript and Canvas (in the interface), or should I do this in the background? And if possible, then how?

Thanks in advance.