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

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

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

let height = 800;
let width = 440;
let 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 = ["#ff2100", "#fead70", "#b90000"];
// const colors = ["#fa9442", "#f2ff26", "#6bffb3"];
// const colors = ["#d99e73", "#681916", "#0d75ff"];

const rectangleHeight = height / 3;

draw();

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

  let img = new Image();
  img.src =
    "https://cdn.pixabay.com/photo/2020/07/30/18/40/flowers-5450937_1280.png";

  // img.src =
  //   "https://thegraphicsfairy.com/wp-content/uploads/2015/06/Vintage-Blue-Botanical-GraphicsFairy.jpg";

  // img.src =
  //   "https://www.kindpng.com/picc/m/286-2869532_vintage-flower-illustration-png-vintage-botanical-illustration-png.png";

  img.onload = function () {
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, width, height);

    ctx.drawImage(img, 0, 0, width, height);

    ctx.globalAlpha = 0.5;
    ctx.fillStyle = colors[0];
    ctx.fillRect(0, 0, width, rectangleHeight);

    ctx.fillStyle = colors[1];
    ctx.fillRect(0, rectangleHeight, width, rectangleHeight);

    ctx.fillStyle = colors[2];
    ctx.fillRect(0, rectangleHeight * 2, width, rectangleHeight);
  };
}

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

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