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

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

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

const pixelSize = 54;

draw();

function draw() {
  // ctx.fillStyle = "#0871af";
  // ctx.fillStyle = "#10A674";
  ctx.fillStyle = "#CB0162";
  // ctx.fillStyle = "#A442A0";

  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  ctx.font = "bold 40px courier";
  ctx.fillStyle = "white";

  for (let y = 0; y < canvas.height; y += pixelSize) {
    for (let x = 0; x < canvas.width; x += pixelSize) {
      ctx.font = `bold ${randomNum(20, 200)}px courier`;

      let opacity;
      let num = randomNum(0, 2);
      if (num == 0) {
        opacity = 0.4;
      } else if (num == 1) {
        opacity = 0.8;
      } else {
        opacity = 1;
      }

      let color = `rgba(255, 255, 255, ${opacity})`;
      ctx.fillStyle = color;

      let text = getChar(x / pixelSize, y / pixelSize);
      ctx.fillText(text, x, y);
    }
  }
}

function getChar(x, y) {
  if (x % randomNum(2, 3) == 0 && y % randomNum(2, 4) == 0) {
    return "|";
  } else if (x == randomNum(1, 20) || y == randomNum(1, 10)) {
    return randomNum(0, 1) ? "/" : "//";
  } else if (x % randomNum(2, 3) == 0 && y % randomNum(2, 4) == 0) {
    return "_";
  } else if (x == randomNum(1, 20)) {
    return ">";
  } else if (x == randomNum(1, 20) || y == randomNum(1, 10)) {
    return ".";
  } else if (x == randomNum(1, 10) || y == randomNum(1, 10)) {
    return "o";
  } else if (x == randomNum(1, 20)) {
    return "*";
  }
  return "";
}

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

canvas.addEventListener("click", draw);