Wrap image around cylinder using canvas drawImage opacity issue

Question

I need to wrap an image around another image of a mug using javascript, and I found this: Wrap an image around a cylindrical object in HTML5 / JavaScript

This helps when loading the image that has the mug handle on the left. However when using the same function (with tweaked position values) the image has an opacity applied to it. I searched endlessly to figure out for what reason this is happening however I found nothing :/

This is the function used to wrap the image for the mug with the right handle:

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;

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

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

 productImg.src =
   'https://i.ibb.co/B2G8y1m/white-right-ear.jpg';

 function loadUpperIMage() {
   var img = new Image();
   img.src =
     'https://i.ibb.co/BnQP0TL/my-mug-image.png';

   img.onload = function() {
     var iw = img.width;
     var ih = img.height;

     var xOffset = 48, //left padding
         yOffset = 68; //top padding

     var a = 70; //image width
     var b = 8; //round ness

     var scaleFactor = iw / (6 * 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

       if (!isNaN(y)) {
         ctx.drawImage(
           img,
           X * scaleFactor,
           0,
           iw / 0.78,
           ih,
           X + xOffset,
           y + yOffset,
           1,
           162
         );
       }
     }
   };
 }

}

Hope someone can help with this!

Here is a fiddle with the issue https://jsfiddle.net/L20aj5xr/

Answer 1

It is because of the 4th argument you pass to drawImage - iw / 0.78. By multiplying image width by a value lower than one, you get the value larger than image width. The spec for drawImage says:

When the source rectangle is outside the source image, the source rectangle must be clipped to the source image and the destination rectangle must be clipped in the same proportion.

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Because the source width (sw) you are using is larger than source image size, the destination rectangle "is clipped in the same proportion". The destination rectangle width is 1px because you chose it as a width for each vertical line you are drawing, and after clipping it's width becomes 1 * 0.78 = 0.78px. The width is now less than 1px and to be honest I am not exactly sure how it actually works under the hood, but my guess is that a browser still needs to draw that 1px, but because the source is 0.78px, it kinda stretches the source to that 1px and adds some anti-aliasing to smooth the transition, which results into added transparency (i.e. browser does not have enough information for that 1px and it tries to fill it up the best it can). You can play around with that by incresing sw even more and observe increasing transparency.

To fix your issue I used the value 20 instead of 0.78 like for the first cup and it seemed to look ok.