Canvas - Apply Global Composition on Multiple Images inside One Canvas

Question

I am working on a task to apply a pattern to multiple parts of shirt. Shirt image cannot be a single image. It is making with small images like left arm, right arm, collar etc... Now I want to apply a pattern or color to all the parts inside the canvas.

<canvas id="canvas" width=250 height=250  style="margin-left: 100px; background: pink"></canvas>

<script type="text/javascript">
    var img1 = new Image, img2 = new Image, cnt = 2,   img3 = new Image,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

// image loading for demo (ignore)
img1.onload = img2.onload = function() {if (!--cnt) go()};


// Left Arm 
img1.src = "left_arm.png";   
//Right Arm
img3.src = "right_arm.png"; 

// Pattern Image
img2.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlncafGCzVapWvTID6msFfk7OWtQSCEEnbKSLQhzVk1cPqe9CQ";   //  



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);
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);  

}
</script>