Javascript ctx画布图像从底部减少宽度

我使用下面的代码在画布上绘制了这个图像，我将元素图像与折叠杯图像结合在一起

canvas2(getFullElementImage);

function canvas2(getFullElementImage) {

    var canvas = document.getElementById("finalCanvas");
    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, 30, 0, productImg.width, productImg.height,
            0, 0, iw, ih);
        loadUpperIMage()
    };
    productImg.src = "https://res.cloudinary.com/faizykhan1212/image/upload/v1550583008/folded_cup_1.png"

    function loadUpperIMage() {
        var img = new Image();
        img.src = getFullElementImage;

        img.onload = function () {

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

            // alert(iw)

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

            var a = 190.0; //image width
            var b = 20; //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, 574);

            }
        };
    }

};

canvas2（getFullElementImage）；
函数canvas2（getFullElementImage）{
var canvas=document.getElementById（“finalCanvas”）；
var ctx=canvas.getContext（“2d”）；
var productImg=新图像（）；
productImg.onload=函数（）{
var iw=产品img.width；
var ih=产品高度；
控制台。原木（“高度”）；
canvas.width=iw；
canvas.height=ih；
ctx.drawImage（productImg，30，0，productImg.width，productImg.height，
0,0,iw,ih）；
loadUpperIMage（）
};
productImg.src=”https://res.cloudinary.com/faizykhan1212/image/upload/v1550583008/folded_cup_1.png"
函数loadUpperIMage（）{
var img=新图像（）；
img.src=getFullElementImage；
img.onload=函数（）{
var iw=img.宽度；
var ih=img.高度；
//警报（iw）
var xOffset=160，//左填充
yOffset=110；//顶部填充
var a=190.0；//图像宽度
var b=20；//圆度
var scaleFactor=iw/（4*a）；
//绘制垂直切片
对于（变量X=0；X

这是图像的显示方式：

我希望这能减少底部的宽度，这样就可以适合杯的左右角

---

谢谢

也许你可以用webGL来做这样的例子。 这段代码太棒了。我对此部件进行了一些校准：

canvas2（）；
功能画布2（）{
var canvas=document.getElementById（“finalCanvas”）；
var ctx=canvas.getContext（“2d”）；
var productImg=新图像（）；
productImg.onload=函数（）{
var iw=产品img.width；
var ih=产品高度；
控制台。原木（“高度”）；
canvas.width=iw；
canvas.height=ih；
ctx.drawImage（productImg，30，0，productImg.width，productImg.height，
0,0,iw,ih）；
loadUpperIMage（）
};
productImg.src=”https://res.cloudinary.com/faizykhan1212/image/upload/v1550583008/folded_cup_1.png"
函数loadUpperIMage（）{
var img=新图像（）；
img.src=”https://res.cloudinary.com/faizykhan1212/image/upload/v1550655724/download-3.png";
img.onload=函数（）{
var iw=img.宽度；
var ih=img.高度；
//警报（iw）
var xOffset=174，//左填充
yOffset=110；//顶部填充
var a=180.0；//图像宽度
var b=80；//圆度
var scaleFactor=iw/（4*a）；
//绘制垂直切片
对于（变量X=0；X
请给我们其他图片链接，我会尝试修复。请访问@NikolaLukic这是另一个图片URL。请帮忙。谢谢
      var xOffset = 174, //left padding
          yOffset = 110; //top padding

        var a = 180.0; //image width
        var b = 80; //round ness