title: ctx canvas image decrease width from bottom side
body: <p>I have drawn the image in the canvas by using this below code in which I have combined the elements images with the folded cup image </p>
  
  <pre><code>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 &lt; 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);
  
              }
          };
      }
  
  };
  </code></pre>
  
  <p><strong>This is how image is showing:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/hpIAY.png" alt="This is how image is showing"></p>
  
  <p>I want this to the decrease the width from the bottom so that this will fit to the cup with the left and the right corners.</p>
  
  <p>Thanks</p>