JSFiddle - React, Tailwind, and code Playground

by Sandeep Roy

HTML

<h4>click left and right arrow key to rotate cup</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
}

JavaScript

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;

    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://in-sandeep.printvenue.org/test-images/product-image.jpg";

var img = new Image();
img.onload = start;
img.src = "http://in-sandeep.printvenue.org/test-images/mug-strap.png";
var pointer = 0;

function start() {

    var iw = 198.97826;
    var ih = img.height;
    //canvas.width = iw + 20;
    //canvas.height = ih + 20;

    var x1 = 50;
    var y1 = 40;
    var x2 = 97;
    var y2 = 60;
    var x3 = 152;
    var y3 = 40;

    // calc line equations slope & b (m,b)
    var unitT = 1 / iw;

    // draw vertical slices
    for (var X = 0, t = 0; X < iw; X++, t+=unitT) {
        var xTop = (1-t) * (1-t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;
        var yTop = (1-t) * (1-t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
        ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih-188);
    }

    // outline
    /*ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3);
    ctx.stroke();*/
}

document.onkeydown = function(event) {
    var keyCode = event.keyCode;
    switch(keyCode) {
        case 37: // left arrow key
            var oldPointer = pointer;
            pointer = ( pointer - 10 >= 0 ) ? pointer - 10 : 0;
            if( pointer < oldPointer ) start();
            break;
        case 39: // right arrow key
            var oldPointer = pointer;
            pointer = ( pointer + 10 <= (img.width - 198.97826) ) ? pointer + 10 : (img.width - 198.97826);
            if( pointer >...