How to create a mask layer from a user uploaded image in P5js

I’m trying to create a generative canvas which has multiple grid layout options (a mix of square, rectangle and circles) and allows a user to upload an image to the canvas. The image should be masked by for example the circle shape that sits ontop of the main grid structure and fit the shape by width or height in grid option 1 for example.

What is a good way to go about this so that the uploaded image can be reused in say in grid option three but masked in a rectangle? Each grid layout offers different spaces in which the image can be masked by a shape.

The selection of a grid option is controlled by a range slider.

I have tried it my side and the image uploads but sits behind the grid layout at a large size.

my code also uses HTML & CSS.

Thanks