JSFiddle - React, Tailwind, and code Playground

by clauswilke

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Random Circles</title>
  <style>
    /* Set the canvas to fill the entire window */
    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <label for="circleCount">Number of Circles:</label>
  <input type="range" id="circleCount" name="circleCount" min="1" max="100" value="50">

  <canvas id="myCanvas"></canvas>

  <script>
    // Get the canvas element and its context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Get the circle count slider element
    const circleCountSlider = document.getElementById("circleCount");

    // Set the canvas width and height to match the window size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Draw random circles on the canvas
    function drawCircles() {
      // Get the current circle count from the slider
      const circleCount = circleCountSlider.value;

      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw the circles
      for (let i = 0; i < 5000000; i++) {
        // Generate random values for the circle's properties
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * 50 + 10;
        const red = Math.floor(Math.random() * 256);
        const green = Math.floor(Math.random() * 256);
        const blue = Math.floor(Math.random() * 256);

        // Set the circle's fill color
        ctx.fillStyle = `rgb(${red},${green},${blue})`;

        // Draw the circle
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // Add an event listener to the circle count slider
    circleCountSlider.addEventListener("input", drawCircles);

    // Draw the circles initially
    drawCircles();
  </script>
</body>
</html>