JSFiddle - React, Tailwind, and code Playground

by totoromaum

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>A Bouncing Ball</title>
  </head>

  <body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var Ball = function() {
        this.x = 100;
        this.y = 100;
        this.xSpeed = -2;
        this.ySpeed = 3;
      };
      var circle = function(x, y, radius, fillCircle) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2, false);
        if (fillCircle) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      };
      Ball.prototype.draw = function() {
        circle(this.x, this.y, 3, true);
      };
     

    </script>

  </body>

</html>