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

    var canvas = document.getElementById("canvas");
    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);

        //start();

        // outline
        ctx.beginPath();
         ctx.moveTo(88, 235.734375);
         ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
         ctx.stroke();
    };
    productImg.src = "http://www.webhek.com/wordpress/wp-content/uploads/2018/05/0018872_inspirational_teacher_mug.jpeg";

    var img = new Image();
    img.onload = start;
    img.src = "http://www.webhek.com/wordpress/wp-content/uploads/2018/05/Make-new-friends.jpg";
    var pointer = 0;


    function start() {

        var iw = img.width;
        var ih = img.height;
        
        var xOffset = 125,
            yOffset = 122;
        
        var a = 122.0;
        var b = 30.0;
        
        var scaleFactor = iw / (2*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, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
        }
    }