Untitled

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <title>Canvas tutorial template</title>
  <script type="text/javascript">
    const WIDTH = 800;
    const HEIGHT = 800;
    const PI_2 = Math.PI * 2;
    var ctx;
    var Ball = function(speedX, speedY, locationX, locationY, radius, red, green, blue) {
      this.speedX = speedX;
      this.speedY = speedY;
      this.locationX = locationX;
      this.locationY = locationY;
      this.radius = radius;
      this.red = red;
      this.green = green;
      this.blue = blue;
    }

    setInterval(createBall, 100);

    function createBall() {
      var canvas = document.getElementById('tutorial');
      if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        let ball = new Ball(
          Math.random() * 8.0 - 4.0,
          Math.random() * 8.0 - 4.0,
          Math.random() * WIDTH,
          Math.random() * HEIGHT,
          Math.random() * 45.0 + 1.0,
          Math.floor(Math.random() * 96),
          Math.floor(Math.random() * 96),
          Math.floor(Math.random() * 96)
        );

        ctx.beginPath();
        ctx.fillStyle = 'rgb(' + ball.red + ',' + ball.green + ',' + ball.blue + ')';
        ctx.arc(ball.locationX, ball.locationY, ball.radius, 0, PI_2, true);
        ctx.fill();
      }
    }
  </script>
  <style type="text/css">
    canvas {
      background-color: #000;
      border: 1px solid #999;
    }
  </style>
</head>

<body onclick="createBall();">
  <canvas id="tutorial" width="800" height="800"></canvas>
</body>

</html>