html canvas draw cylindrical view of the image by drawing vertical slices

Question

I am using below code to draw a cylindrical view of the image by drawing vertical slices of the image:

DrawMug(canvasId, cupImg, rotate, scale) {
      var canvas: any = document.getElementById(canvasId);
      var ctx = canvas.getContext("2d");
    
      var productImg = new Image();
      productImg.onload = () => {
        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);
        this.loadUpperIMage(ctx, rotate, scale);
      };
    
      productImg.src = cupImg;
    }

    loadUpperIMage(ctx: any, rotate: number, scale: number) {
        var img = new Image();
        img.src = this.designImgUrl;
        img.onload = function() {
     
          var iw = img.width;
          var ih = img.height;
    
          var xOffset = 100, //left padding
            yOffset = 110; //top padding
    
          var a = 75.0; //image width
          var b = 12.0; //round ness
    
          var scaleFactor = iw / (scale * a);

          // draw vertical slices (increasing X by 1)
          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 / rotate), ih, X + xOffset, y + yOffset, 1, 174);
          }
        };
      }

It draws the image but the edges doesn't look good as below:

I tried resolving it by decreasing the vertical slice width by replacing the for loop as below

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

it fixes the edges but it distorts the image as below, probably because here I am taking destination width as 0.1 but, I am not sure how do I set source width accordingly.

Fiddle https://jsfiddle.net/au8f6d51/