How overlay image over a cup using html5 canvas

Question

I am new to HTML5 canvas. I have a image of a cup, I am rendered that in canvas.

This is image of cup :

enter image description here

Now I am trying render another image (My photo that is in normal rectangular size) in upload your design area of this image. How can I render this image which looks like that image on cup?

I want to get the final image like this :

enter image description here

I am uses canvas element to upload the image.

 <!DOCTYPE html>
 <html>
 <body>

 <canvas id="myCanvas" width="400" height="400" style="border:5px solid #c3c3c3;">
 Your browser does not support the HTML5 canvas tag.
 </canvas>

 <script src="js/test.js" type="text/javascript"></script>


 </body>
 </html>

JS

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();

var x = 0;
var y = 0;
var width = 290;
var height = 297;

imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
};

imageObj.src = 'images/cup.jpg';

Check out this previous Stackoverflow answer. That question is about "warping" text, but you can use the same technique to "warp" your new image around your cup: http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js — markE, Nov 28 '13 at 08:07
@markE - But I am trying to overlap like http://postimg.org/image/ytw422zi5/ this - How can it possible — user3044649, Nov 28 '13 at 09:43
If you can 'afford' to support only browser handling webgl you might try three.js. webgl support table : http://caniuse.com/webgl three.js : http://threejs.org/ — GameAlchemist, Nov 28 '13 at 18:41
@user3044649 , i am also have same issue, anf trying to find solution...do have any idea how to archive this or any example, can you please share it. thanks — MANISHDAN LANGA, Dec 06 '13 at 06:53

score 1 · Answer 1 · edited May 23 '17 at 12:12

You want your second image to "warp" and appear as if it's wrapped around the cup.

You cannot warp your second image into a curved image using "out-of-the-box" context 2d

Using html Canvas 2d Context, you can only do quadrilateral skewing. Therefore, after skewing an image each opposing side will always be parallel.

Therefore, you cannot get your image to warp into a curved image using "out-of-the-box" context 2d.

A few workarounds...You can use an offscreen temporary canvas to "warp" your second image into a curve. Then you can draw that curved image on top of the cup image using context.drawImage. Here are 2 alternatives that let you "fake" curvature of an image.

Alternative #1: Texture Mapping

You can use texture mapping to apply perspective curvature to your second image:

http://archive.gamedev.net/archive/reference/articles/article852.html

Alternative #2: Vertically slice and stretch

You can vertically slice your second image to create perspective curvature. You can use the resizing capability of context.drawImage to "stretch" pixels into your curved shape like in this previously Stackoverflow answer: How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

jsfiddle.net/AbdiasSoftware/e8hZy/

How overlay image over a cup using html5 canvas

1 Answers1

Linked