JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<canvas id="canvas" width=300 height=235></canvas>

CSS

body {
            background-color: ivory;
            padding:20px;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            window.requestAnimFrame = (function (callback) {
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
            })();

            var left = 1.0;
            var right = 300;
            var sizing = .25;

            var img = new Image();
            img.onload = function () {
                animate();
            }
            img.src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";

            function animate() {

                // update scaling factors
                left += sizing;
                right -= sizing;
                if (left < 0 || left > 100) {
                    sizing = -sizing;
                }
                console.log(left + "/" + right);


                // clear and save the context
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.save();

                // draw image increasingly "squished"
                // to fake a 3d effect
                ctx.drawImage(img, 0, 0, img.width, img.height,
                left,
                10, (300 - (right - left)) / 1,
                300 - (right - left) / 1.5);

                ctx.restore();

                // request new frame
                requestAnimFrame(function () {
                    animate();
                });
            }
            animate();