Upload image to mock-up for HTML canvas

What I want?
When you upload an image to a mock-up such as a model, it’ll put the image in front of the mock-up. For example –

Before uploading the image: https://gyazo.com/83ef496f7c7645e694f35dd0ee5a8ff0

After uploading the image: https://gyazo.com/09c0e4eba05f8959407847e7c713f1ac

As you can see, before it just displays a standard model with the t-shirt on the HTML canvas but after uploading an image, it uploads the image to a specific point on the canvas so it can put the image at that certain point.

So explaining in steps:

Step 1; Upload the image
Step 2; it attaches to the t shirt for example (somehow draws it in HTML canvas)

So my main question stands, if I have a random mock-up from google images such as the one displayed for the before the image was added (https://gyazo.com/83ef496f7c7645e694f35dd0ee5a8ff0) how can make it so it puts any image I upload on a specific section of that model while it blends the image so it looks like it’s part of that mock-up.