<div class="wrapper">
  <canvas id="canvas"></canvas>
</div>

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #222222;
}

.wrapper {
  width: 100%;
  height: 100%;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const outputContainer = document.getElementsByClassName("wrapper")[0];

const ratio = window.devicePixelRatio || 1;
let width = outputContainer.offsetWidth;
let height = outputContainer.offsetHeight;
canvas.width = width;
canvas.height = height;
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
ctx.scale(ratio, ratio);

let startX = width / 2;
let startY = height / 2;

let incrementor = 6;
let movement = 10;
let circleRadius = 8;

draw();

function draw() {
  for (let red = 0; red <= 255; red += incrementor) {
    for (let green = 0; green <= 255; green += incrementor) {
      for (let blue = 0; blue <= 255; blue += incrementor) {
        let x = randomCoord(startX, "X");
        let y = randomCoord(startY, "Y");

        ctx.beginPath();
        ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
        ctx.arc(x, y, circleRadius, 0, 2 * Math.PI);
        ctx.fill();

        startX = x;
        startY = y;
      }
    }
  }
}

function randomCoord(num, axis) {
  if (axis == "X" && num + movement >= width) {
    return randomNum(width - movement - 2, width - movement);
  }

  if (axis == "Y" && num + movement >= height) {
    return randomNum(height - movement - 2, height - movement);
  }

  if (num - movement <= 0) {
    return randomNum(0, num + movement);
  }

  return randomNum(num - movement, num + movement);
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

document.addEventListener("click", () => {
  requestAnimationFrame(draw);
});