Looking for a way to overlay images using a user-specified mask

Hello, I’m hoping someone can provide some guidance with an app I’m building. Right now, users have the ability to upload an image (for example, a wall or countertop), then draw semi-transparent lines over top of the image to designate where they want a certain material to appear (like creating a user-defined layer mask). They can then upload different materials/paint colors, which I want to then be applied over the original image but only over the highlighted areas.

Does anyone know of a method that can merge the uploaded material/color onto the highlighted sections of the image? Would this be better accomplished using an AI model of some sort, and if so, can anyone recommend one suited for a task like this? Thanks!

Tough question!
As of now, I can only think of saving HTML as a database… and work with javascript.

It’s definitely been causing me some headache. I’m not super familiar with Javascript, so I was hoping for a plugin or some easy solution that was staring me in the face. Thanks for the advice though