<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);

// https://sanzowada.app/combination/123
const colors = ["#ff7399", "#6b2e63", "#f2ff26"];

// const colors = ["#d60036", "#ffff00", "#0d75ff"];

// const colors = ["#fa9442", "#f2ff26", "#6bffb3"];

// const colors = ["#ff788c", "#ffff00", "#29bdad"];

let amountOfCubes = 14;

draw();

function draw() {
  let startX = 80;
  let startY = 800;
  ctx.fillStyle = "#222222";
  ctx.fillRect(0, 0, width, height);

  for (let i = 0; i < amountOfCubes; i++) {
    let cubeWidth = randomNum(14, 90);
    let columnAmount = randomNum(1, 4);

    // for (let j = 0; j < columnAmount; j++) {
    let cubeHeight = randomNum(40, 700);

    drawCube(
      startX + cubeWidth / 2,
      startY,
      cubeWidth / 2,
      cubeWidth / 2,
      cubeHeight
    );
    // startY = startY - cubeHeight;
    // }

    // startY = 800;
    // drawCube(
    //   startX + cubeWidth / 2,
    //   startY,
    //   cubeWidth / 2,
    //   cubeWidth / 2,
    //   cubeHeight
    // );
    startX = startX + cubeWidth;
  }
}

function drawCube(x, y, wx, wy, h, fillStyle) {
  // left face
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x - wx, y - wx * 0.5);
  ctx.lineTo(x - wx, y - h - wx * 0.5);
  ctx.lineTo(x, y - h * 1);
  ctx.closePath();
  ctx.fillStyle = colors[0];

  // ctx.fillStyle = colors[randomNum(0, 2)];
  ctx.fill();

  // right face
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + wy, y - wy * 0.5);
  ctx.lineTo(x + wy, y - h - wy * 0.5);
  ctx.lineTo(x, y - h * 1);
  ctx.closePath();
  ctx.fillStyle = colors[1];
  // ctx.fillStyle = colors[randomNum(0, 2)];
  ctx.fill();

  // center face
  ctx.beginPath();
  ctx.moveTo(x, y - h);
  ctx.lineTo(x - wx, y - h - wx * 0.5);
  ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
  ctx.lineTo(x + wy, y - h - wy * 0.5);
  ctx.closePath();
  ctx.fillStyle = colors[2];
  // ctx.fillStyle = colors[randomNum(0, 2)];

  ctx.fill();
}

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

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