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

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

.wrapper {
  width: 100%;
  height: 100%;
  background: #222222;
}

canvas {
  /*   image-rendering: pixelated; */
}

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

width = outputContainer.offsetWidth;
height = outputContainer.offsetHeight;

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

const colors = ["#FFC513", "#FF724C", "#D8DCD6", "#D46A7E"];
const pixelSize = 60;

requestAnimationFrame(draw);

function draw() {
  ctx.lineWidth = 3;
  for (var i = 0; i < width; i++) {
    for (var j = 0; j < height; j++) {
      ctx.beginPath();
      var x = j * (pixelSize / 2);
      var y = i * (pixelSize / 2);
      var radius = randomNum(10, 50);
      var startAngle = 0;
      var endAngle =
        Math.PI * Math.random() + 0.4 + (Math.PI * Math.random()) / 2;
      var counterclockwise = i % 2 !== 0;

      ctx.fillStyle = colors[randomNum(0, colors.length - 1)];

      ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
      ctx.fill();

      ctx.stroke();
    }
  }

  // setTimeout(() => requestAnimationFrame(animate), animationInterval);
}

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

canvas.addEventListener("click", draw);