How to fill a image with pattern (Fabric on shirt)

1. Let's say I have an image!

2. Now I want to fill that image with below fabric.

3. And my final image will look like this

how to do it? so far I was able to change the color of that image but was not able to fill pattern.

Is there any way to do it with PHP, jquery, and javascript.

Thanks in advance!

Demo link: https://www.bombayshirts.com/custom/shirt

I just want to fill a patter in a shirt like shown in the above demo.

What I had tried is the below, but using the below code, I lose my shirt shape and image will be pixellated.

var img1 = new Image, img2 = new Image, cnt = 2,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

 
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "https://www.itailor.co.uk/images/product/shirt/it1823-1.png";       // Shirt
img2.src = "https://i.stack.imgur.com/sQlu8.png";   // pattern

// MAIN CODE ---
function go() {

  // create a pattern  
  ctx.fillStyle = ctx.createPattern(img2, "repeat");
  
  // fill canvas with pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // use blending mode multiply
  ctx.globalCompositeOperation = "multiply";
  
  // draw sofa on top
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
  
  // change composition mode
  ctx.globalCompositeOperation = "destination-in";
  
  // draw to cut-out sofa
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}

<canvas id="canvas" width=500 height=300></canvas>

from How to fill a image with pattern (Fabric on shirt)