title: Wrap whole image on cylindrical cup in javascript html5
body: <p>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: <a href="https://stackoverflow.com/questions/31424117/wrap-image-around-a-cylindrical-cup-using-html-5-canvas-and-javascript">https://stackoverflow.com/questions/31424117/</a>.
  But i am not getting  solution from this link. </p>
  
  <p><a href="https://i.stack.imgur.com/YD9Zy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YD9Zy.png" alt="enter image description here"></a></p>
  
  <p>I want to wrap remaining image behind the cup, Like mold the remaining part and add some button for rotation. </p>
  
  <pre><code>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
          &lt;script&gt;
              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 &amp; b (m,b)
                  var unitT = 1 / iw;
  
                  // draw vertical slices
                  for (var X = 0, t = 0; X &lt; 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);
                  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Wtw9k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wtw9k.png" alt="enter image description here"></a></p>
  
  <p>If i change the pointer value in above code, than remaining image
   stretch.</p>
  
  <pre><code>var pointer = 100 ;
  </code></pre>
  
  <p>I want to wrap image on whole mug and rotate in left and right. </p>