    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>원 그리기</title>
    </head>
    <body>
      <canvas id="myCanvas" width="700" height="500"
        style="border: 2px solid #cef"> </canvas>
      <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        function drawRandomCircle() {
            let x = Math.random() * 700;
            let y = Math.random() * 500;
            let radius = Math.random() * 30 + 5;

            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = "rgba(0, 0, 255, 0.4)";
            ctx.fill();
        }
        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          for (let i = 1; i < 25; i++)
            drawRandomCircle();
        }
        setInterval(() => { draw() }, 1000);
      </script>
    </body>
    </html>