title: How to fill a image with pattern (Fabric on shirt)
body: <p><a href="https://i.stack.imgur.com/ocWBp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ocWBp.png" alt="enter image description here"></a></p>
  
  <ol>
  <li><p>Let's say I have an image!</p></li>
  <li><p>Now I want to fill that image with below fabric.</p></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/vVv0I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vVv0I.png" alt="enter image description here"></a></p>
  
  <ol start="3">
  <li>And my final image will look like this</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/a4DvQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/a4DvQ.png" alt="enter image description here"></a></p>
  
  <p>how to do it? so far I was able to change the color of that image but was not able to fill pattern.</p>
  
  <p>Is there any way to do it with PHP, jquery, and javascript.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Demo link:</strong> <a href="https://www.bombayshirts.com/custom/shirt" rel="noreferrer">https://www.bombayshirts.com/custom/shirt</a> </p>
  
  <p><strong>I just want to fill a patter in a shirt like shown in the above demo.</strong></p>
  
  <p>What I had tried is the below, but using the below code, I lose my shirt shape and image will be pixellated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width=500 height=300&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>