CTX холст изображения уменьшить ширину от нижней стороны

Question

Я нарисовал изображение на холсте, используя приведенный ниже код, в котором я объединил изображения элементов со сложенным изображением чашки

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);

            }
        };
    }

};

Вот как показано изображение:

Я хочу уменьшить ширину снизу, чтобы она соответствовала чашке с левым и правым углами.

Спасибо

Answer 1

Может быть, вы можете использовать webGL для подобных примеров.Этот код великолепен.Я сделал некоторые калибровки для этой части:

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

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

canvas2();

function canvas2() {

    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 = "https://res.cloudinary.com/faizykhan1212/image/upload/v1550655724/download-3.png";

        img.onload = function () {

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

            // alert(iw)

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

            var a = 180.0; //image width
            var b = 80; //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);

            }
        };
    }

};

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