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

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

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

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

let canvasWidth = outputContainer.offsetWidth;
let canvasHeight = outputContainer.offsetHeight;

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

let colors = ["#6E3150", "#AF325A", "#D6353A", "#F08644", "#F7D954"];

draw();

function draw() {
  ctx.fillStyle = "#F5E8CA";
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);

  for (let i = 0; i < 100; i++) {
    let startX = randomNum(0, 10);
    let startY = randomNum(200, 800);

    ctx.save();

    let degress = randomNum(180, 360);
    ctx.rotate((degress * Math.PI) / 180);
    ctx.translate(0, randomNum(-100, 500));
    let columWidth = randomNum(2, 24);

    for (let column = 0; column < colors.length; column++) {
      ctx.fillStyle = colors[column];
      ctx.fillRect(startX, startY, columWidth, 10000);
      startX = startX + columWidth;
    }

    ctx.restore();
  }
}

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

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