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, context){
                context.beginPath();
                context.moveTo(0, 0);
                
                for (var y = 0; y < 200; y++) {
                    // Sine wave equation
                    var x = 30 * Math.sin(y / 9.05);
                    context.lineTo(x, y);
                }
            }
            
            function drawWeight(canvas, context){
                var size = 100;
                context.save();
                context.fillStyle = "red";
                context.fillRect(-size / 2, 0, size, size);
                context.restore();
            }
            
            function animate(canvas, theta, lastTime){
                var context = canvas.getContext("2d");
                
                // update
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;
                theta += timeDiff / 400;
                lastTime = time;
                
                var scale = 0.8 * (Math.sin(theta) + 1.3);
                
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // draw
                context.save();
               ...