JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls">
    <button id="startBtn">Start</button>
    <button id="stopBtn">Stop</button>
  </div>
  <!-- The canvas element where the animation is drawn -->
  <canvas id="canvas" style="background:white; width:100%"></canvas>

JavaScript

(function() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // Cycloid parameters
      var r = 50;       // Radius of the rolling circle
      var t = 0;        // Parameter t (in radians)
      var dt = 0.05;    // Increment of t per frame
      
      // Coordinate offsets to place the "ground"
      var offsetX = 100;
      var offsetY = canvas.height / 2;
      
      // Array to store cycloid path points
      var path = [];
      
      // Variables to control the animation loop
      var animationFrameId = null;
      var running = false;
      
      // Animation draw function
      function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw the ground line at y = offsetY
        ctx.beginPath();
        ctx.moveTo(0, offsetY);
        ctx.lineTo(canvas.width, offsetY);
        ctx.strokeStyle = "#999";
        ctx.lineWidth = 2;
        ctx.stroke();
        
        /*  
            Standard cycloid equations:
              x = r (t - sin t)
              y = r (1 - cos t)
            Since the canvas y‑axis is downward, we set:
              canvas_x = offsetX + (mathematical x)
              canvas_y = offsetY - (mathematical y)
        */
        
        // Calculate the circle's center coordinates
        var cx = offsetX + r * t;
        var cy = offsetY - r;  // so that the bottom of the circle touches the ground
        
        // Calculate the cycloid point (point on the rim)
        var px = offsetX + r * t - r * Math.sin(t);
        var py = offsetY - r + r * Math.cos(t);
        
        // Store the cycloid path point
        path.push({ x: px, y: py });
        
        // Draw the cycloid path (in blue)
        ctx.beginPath();
        ctx.strokeStyle = "blue";
       ...