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

Question

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

问题：
我想放置另一张图片，根据背景图片中的曲线，它可以是徽标/文字。例如

这是没有徽标/文字的简单图像。 我到目前为止唯一要做的就是将一个图像加载到另一个图像之上。 现在我卡住了，不知道如何在特定的地方获得背景图像的曲线，如下所述。

这是示例代码。

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是否可以实现。我只是想要一个想法，甚至会对资源的引用进行评估。