title: Curve image based on background image in Javascript
body: <p>I'm newbie to canvas programming in javascript. I just need an idea how to achieve this problem.</p>
  
  <p>Problem:<br>
  I want to place another image, it can be a logo/text according to curveness in background image. For example</p>
  
  <p>This is simple image without logo/text.
  The only thing which i did until now is to load one image on top of another.
  Now I'm stuck don't know how to get curveness of background image at specific place like explained below.</p>
  
  <p>this is the sample code. </p>
  
  <pre><code>var canvas = document.getElementById("myCanvas");   
  var ctx = canvas.getContext("2d");    
  var img=new Image();    
  img.onload = function() {        
   ctx.drawImage(img,150,0,500,500);    }    
   img.src="images/image.png";    
   var logoImg=new Image();    
   logoImg.onload = function() {        
       ctx.drawImage(logoImg,185, 115,80,70);    
   }    
  logoImg.src="images/sanm.png";    
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ztih8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ztih8.png" alt="enter image description here"></a></p>
  
  <p>After placing logo on different places, the logo adopt itself according to curveness of shirt. </p>
  
  <p><a href="https://i.stack.imgur.com/JRahG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JRahG.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/m39Qj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m39Qj.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/K05zH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K05zH.png" alt="enter image description here"></a></p>
  
  <p>Is it achievable using Javascript. I just want an idea even references to resources will be appricated.</p>