title: HTML5 canvas apply color to image where shape overlays
body: <p>I have this image drawn to a HTML5 canvas:</p>
  
  <p><a href="https://i.stack.imgur.com/vIKpI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vIKpI.png" alt="Model"></a></p>
  
  <p>What I want to do is apply color to just a part of it.
  The part where I want to apply color is defined by the following overlay image:</p>
  
  <p><a href="https://i.stack.imgur.com/10Tre.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/10Tre.png" alt="Overlay shape"></a></p>
  
  <p>So, basically, I would like to guide my coloring by the overlay. So where the overlay pixels meets the main image pixels I should apply a color on the main image. At least that's how I see it working.
  Notice that the overlay matches the whole image except for the lacing.</p>
  
  <p>The catch is that I would like to retain the main image texture while applying the color. You can see that it has a leather texture and a "real" feel which I want to keep.</p>
  
  <p>Can you please show me some methods of achieving this or share some thoughts?</p>
  
  <p>Thank you!</p>