1

I'm newbie to canvas programming in javascript. I just need an idea how to achieve this problem.

Problem:
I want to place another image, it can be a logo/text according to curveness in background image. For example

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.

this is the sample 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";

enter image description here

After placing logo on different places, the logo adopt itself according to curveness of shirt.

enter image description here enter image description here

enter image description here

Is it achievable using Javascript. I just want an idea even references to resources will be appricated.

Muhammad Danish Khan
  • 459
  • 1
  • 6
  • 23
  • "Is it achievable using Javascript?" yes, but consider using [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) for complex geometries as 2D canvas doesn't support natively drawing this way. –  Nov 28 '17 at 20:12
  • @K3N any more information which will help me implementing this. Any algorithm or links will be most appreciated. I'm searching but not getting any idea about such kind of image processing. – Muhammad Danish Khan Nov 30 '17 at 18:05
  • See for example the comment section on the question for [this question](https://stackoverflow.com/questions/47512630/project-an-image-onto-an-elliptic-cylinder#comment82056034_47512630). –  Dec 01 '17 at 00:33

0 Answers0