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

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

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

canvas {
  margin: 20px;
}

const canvas = document.getElementById("canvas");
const outputContainer = document.getElementsByClassName("wrapper")[0];
const ctx = canvas.getContext("2d");
const ratio = window.devicePixelRatio || 1;
let width = outputContainer.offsetWidth - 40;
let height = outputContainer.offsetHeight - 40;
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width + "px";
canvas.style.height = height + "px";

// const colors = ["#006ba6", "#0496ff", "#ffbc42", "#d81159", "#8f2d56"];

const colors = ["#af4d98", "#d66ba0", "#e5a9a9", "#DBCCA7", "#7dc5b7"];
const pixelSize = 80;
const subPixelSize = 8;

draw();

function draw() {
  ctx.fillStyle = "#222222";

  ctx.lineWidth = "5";

  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < canvas.height; y += pixelSize) {
    for (let x = 0; x < canvas.width; x += pixelSize) {
      ctx.fillStyle = colors[randomNum(0, colors.length - 1)];

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

      let random = randomNum(0, 8);

      if (random == 0) {
        ctx.strokeRect(x + 8, y + 8, pixelSize - 16, pixelSize - 16);
      } else if (random == 1 || random == 5) {
        ctx.fillRect(x + 6, y + 6, pixelSize - 12, pixelSize - 12);
      } else if (random == 2) {
        ctx.fillStyle = "#555555";
        let lineX = 6;

        for (let i = 0; i < 5; i++) {
          ctx.fillRect(x + lineX, y + 6, 10, pixelSize - 12);

          lineX = lineX + 14;
        }
      } else if (random == 3 || random == 6) {
        ctx.beginPath();

        ctx.arc(
          x + pixelSize / 2,
          y + pixelSize / 2,
          pixelSize / 2 - 4,
          0,
          2 * Math.PI
        );
        ctx.fill();
      } else if (random == 4) {
        ctx.beginPath();

        ctx.arc(
          x + pixelSize / 2,
          y + pixelSize / 2,
          pixelSize / 2 - 4,
          0,
          2 * Math.PI
        );
        ctx.stroke();
      }

      //       if (random == 0) {
      //         if (randomNum(0, 1) == 0) {
      //           // ctx.fillRect(x + 6, y + 6, pixelSize - 12, pixelSize - 12);

      //           if (randomNum(0, 1) == 0) {
      //             ctx.strokeRect(x + 8, y + 8, pixelSize - 16, pixelSize - 16);
      //           } else {
      //             ctx.fillRect(x + 6, y + 6, pixelSize - 12, pixelSize - 12);
      //           }
      //         } else {
      //           ctx.fillStyle = "#555555";
      //           let lineX = 6;

      //           for (let i = 0; i < 5; i++) {
      //             ctx.fillRect(x + lineX, y + 6, 10, pixelSize - 12);

      //             lineX = lineX + 14;
      //           }
      //         }
      //       } else {
      //         ctx.beginPath();

      //         ctx.arc(
      //           x + pixelSize / 2,
      //           y + pixelSize / 2,
      //           pixelSize / 2 - 4,
      //           0,
      //           2 * Math.PI
      //         );
      //         if (randomNum(0, 1) == 0) {
      //           ctx.fill();
      //         } else {
      //           ctx.stroke();
      //         }
      //       }
    }
  }
}

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

function degreesToRadians(degrees) {
  var pi = Math.PI;
  return degrees * (pi / 180);
}

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

function hexToRGB(hex, alpha) {
  var r = parseInt(hex.slice(1, 3), 16),
    g = parseInt(hex.slice(3, 5), 16),
    b = parseInt(hex.slice(5, 7), 16);

  if (alpha) {
    return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
  } else {
    return "rgb(" + r + ", " + g + ", " + b + ")";
  }
}