JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <h1>Images</h1>

    <div>
      <canvas id="canvas1"></canvas>
    </div>

    <div>
      <canvas id="canvas2"></canvas>
    </div>


  </body>

CSS

div{
  display: inline-block;
}

JavaScript

function canvas1() {
  var canvas = document.getElementById('canvas1');
  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,
      0,
      0,
      productImg.width,
      productImg.height,
      0,
      0,
      iw,
      ih
    );
    loadUpperIMage();
  };

  productImg.src =
    'https://i.ibb.co/tXmHxsq/white-left-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;

      //alert(iw)

      var xOffset = 112, //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 / 20,
            ih,
            X + xOffset,
            y + yOffset,
            1,
            162
          );
        }
      }
    };
  }
}

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