Wrap whole image on cylindrical cup in javascript html5

Question

I want to wrap image on cylindrical cup. I am using html5 and Java script for achieve this solution. I got some idea from this link: https://stackoverflow.com/questions/31424117/. But i am not getting solution from this link.

I want to wrap remaining image behind the cup, Like mold the remaining part and add some button for rotation.

<canvas id="canvas"></canvas>

        <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var productImg = new Image();
            productImg.onload = function () {
                var iw = productImg.width;
                var ih = productImg.height;
                console.log("height");

                canvas.width = iw;
                canvas.height = ih;

                ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih);

                //start();

                // outline
                /*ctx.beginPath();
                 ctx.moveTo(88, 235.734375);
                 ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
                 ctx.stroke();*/
            };
            productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";

            var img = new Image();
            img.onload = start;
            img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
            var pointer = 0;        


            function start() {

                var iw = img.width;               
                var ih = img.height;
                //canvas.width = iw + 20;
                //canvas.height = ih + 20;

                var x1 = 125;
                var y1 = 130;
                var x2 = 180;
                var y2 = 190;
                var x3 = 405;
                var y3 = 150;

                // calc line equations slope & b (m,b)
                var unitT = 1 / iw;

                // draw vertical slices
                for (var X = 0, t = 0; X < iw; X++, t += unitT) {
                    var xTop = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;                   
                    var yTop = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
                    ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih - 600);
                }

If i change the pointer value in above code, than remaining image stretch.

var pointer = 100 ;

I want to wrap image on whole mug and rotate in left and right.

Answer 1

function canvas1() {
  var canvas = document.getElementById("canvas1");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;
    console.log("height");

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };

  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpg"


  function loadUpperIMage() {
    var img = new Image();


    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"
    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      var xOffset = 102, //left padding
        yOffset = 110; //top padding

      //alert(ih)
      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (4 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174);
      }
    };
  }

};

function canvas2() {

  var canvas = document.getElementById("canvas2");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;
    console.log("height");

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };


  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpg"

  function loadUpperIMage() {
    var img = new Image();

    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"

    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      // alert(iw)

      var xOffset = 101, //left padding
        yOffset = 110; //top padding

      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (4 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 174);

      }
    };
  }

};

function canvas3() {

  var canvas = document.getElementById("canvas3");
  var ctx = canvas.getContext("2d");

  var productImg = new Image();
  productImg.onload = function() {
    var iw = productImg.width;
    var ih = productImg.height;

    canvas.width = iw;
    canvas.height = ih;

    ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
      0, 0, iw, ih);
    loadUpperIMage()
  };

  productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg"


  function loadUpperIMage() {
    var img = new Image();

    img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"

    img.onload = function() {

      var iw = img.width;
      var ih = img.height;

      //alert(iw)

      var xOffset = 102, //left padding
        yOffset = 110; //top padding

      var a = 75.0; //image width
      var b = 10; //round ness

      var scaleFactor = iw / (3 * a);

      // draw vertical slices
      for (var X = 0; X < iw; X += 1) {
        var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
        ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174);
      }
    };
  }

};

setTimeout(function() {
  canvas1()
}, 1000);
setTimeout(function() {
  canvas2()
}, 2000);
setTimeout(function() {
  canvas3()
}, 3000);

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    $current = $current.length ? $current : $items.first();
    var index = $current.index() + delta;
    // Range check the new index
    index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); 
    $current.removeClass('current');
    $current = $items.eq(index).addClass('current');
    // Hide/show the next/prev
    $("#prev").toggle(!$current.is($items.first()));    
    $("#next").toggle(!$current.is($items.last()));    
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});
// Cause initial selection
updateItems(0);

#group div{
    display: none;
}
#group div.current{
    display: block;
   
}
#next, #prev{
    width: 100px;
    height 40px;
   cursor:pointer;
   color:red;
   position:fixed;
}
#next{
  float: right;  
} 
#prev{
  float: left;
  margin-left:40px;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="next">next</div>
<div id="prev">prev</div>
<div id="group" >
  <div>
    <canvas id="canvas1"></canvas>
  </div>

  <div>
    <canvas id="canvas2"></canvas>
  </div>

  <div>
    <canvas id="canvas3"></canvas>
  </div>
</div>

Answer 2

I've played around your plunkr for some time and came up with this: http://plnkr.co/edit/83xAr99FjswWg0GHjDvJ?p=preview

function start() {

    var iw = img.width;
    var ih = img.height;

    var xOffset = 125,
        yOffset = 122;

    var a = 122.0;
    var b = 30.0;

    var scaleFactor = iw / (2*a); //how many times original image is greater compared to our rendering area?

    // draw vertical slices
    for (var X = 0; X < iw; X+=1) {
      var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
      ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
    }
}

I took this ellipsis equation http://www.mathopenref.com/coordgeneralellipse.html and turn it into the form where I can get Y-coordinate from related X-coordinate.

You can play with my plunkr even more to make the image more accurately cover the cup, but it is still far away from reality because this method is not considering different lightning features of the surface of the cup.