How to crop and overlay two images on canvas?

Question

JavaScript

Can you please tell me how to do this on canvas? Those. take a picture, crop it in a shape (for example, a circle) and draw another picture on top of it, also cropped to a certain shape?

I tried the globalCompositeOperation property, but I can’t manage to overlay the second picture (it is superimposed on top of the first one and there’s no way to crop each picture separately).

Answer 1