JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }

            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
            window.requestAnimFrame = (function(callback){
                return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();

            function drawSpring(canvas, ctx){
                ctx.beginPath();
                ctx.moveTo(0, 0);
                //for (var y = 0; y < 200; y++) {
                // Sine wave equation
                //    var x = 30 * Math.sin(y / 9.05);
                    ctx.lineTo(0, 200);
                //}
            }

            function drawWeight(canvas, ctx){
                var size = 100;
                ctx.save();
                ctx.fillStyle = "red";
                ctx.fillRect(-size / 2, 0, size, size);
                ctx.restore();
            }

            function animate(canvas, theta, lastTime){
                var ctx = canvas.getContext("2d");

// update
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;
                theta += timeDiff / 800;
                lastTime = time;

                var scale = 0.8 * (Math.sin(theta) + 1.3);

// clear
                ctx.clearRect(0, 0, canvas.width, canvas.height);

// draw
                ctx.save();
                ctx.translate(canvas.width / 2, 0);

                ctx.save();
                ctx.scale(1, scale);
                drawSpring(canvas, ctx);
                ctx.restore();

                ctx.lineWidth = 6;
     ...