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

html {
  height: 100%;
  background: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 800px;
  min-height: 800px;
}

body {
  margin: 0;
}

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

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

let columnAmount = 800;
let columWidth = canvasSize / columnAmount;
let maxRectangleHeight = 300;

draw();

function draw() {
  let startX = 0;
  let startY = 0;

  for (let column = 0; column < columnAmount; column++) {
    for (let rectangle = 0; rectangle < 3; rectangle++) {
      let rectangleHeight;
      if (rectangle === 0) {
        rectangleHeight = randomNum(80, maxRectangleHeight);
        ctx.fillStyle = "#4A0100";
        // ctx.fillStyle = "#4600E0";
        ctx.fillRect(startX, startY, columWidth, rectangleHeight);
      } else if (rectangle === 1) {
        rectangleHeight = randomNum(80, maxRectangleHeight);
        ctx.fillStyle = "#FD4659";
        // ctx.fillStyle = "#bc00dd";
      } else {
        rectangleHeight = canvasSize - startY;
        ctx.fillStyle = "#FDDC5C";
        // ctx.fillStyle = "#ddd";
      }
      ctx.fillRect(startX, startY, columWidth, rectangleHeight);

      ctx.fillRect(startX, startY, columWidth, rectangleHeight);
      startY = startY + rectangleHeight;
    }
    startY = 0;
    startX = startX + columWidth;
  }
}

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

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