Javascript中基于背景图像的曲线图像

我是javascript画布编程的新手。我只是想知道如何解决这个问题

问题：
我想放置另一个图像，它可以是一个标志/文本，根据背景图像的弯曲度。比如说

这是没有徽标/文本的简单图像。 到目前为止，我所做的唯一一件事就是将一个图像加载到另一个图像上。 现在我被卡住了，不知道如何在下面解释的特定位置获得背景图像的弯曲度

这是示例代码

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";    

在不同位置放置徽标后，徽标会根据衬衫的弯曲度自行调整

---

使用Javascript可以实现吗。我只想知道一个想法，即使引用资源也可以。

“它是可以使用JavaScript实现的吗？”“是的，但是考虑到使用复杂的几何图形，因为2D画布不支持这种方式。”K3N更多的信息将帮助我实现这一点。任何算法或链接将是最欣赏。我正在搜索，但没有得到关于这种图像处理的任何想法。例如，请参阅关于“JavaScript是可以实现的”问题的评论部分吗？“是的，但是考虑到使用复杂的几何图形，因为2D画布不支持用这种方式自然绘制。@ K3N更多的信息将帮助我实现这一点。任何算法或链接将是最欣赏。我正在搜索，但对这种图像处理没有任何概念。例如，请参阅有关问题的评论部分。