How to crop an image on canvas and resize at the same time

I would like to cut this Banana image with this Mask Image so that I get this Cropped Banana image as a result.

I tried using ctx.globalCompositeOperation = 'destination-out'; but I get Banana with black frame or white frame only. The mask image covers up the source image, but it does not actually cut and shows the cut out part only.

Is there a way to achieve this without having white/black background?

Thanks! Happy coding!