JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <img width="500" height="500" />
  <button>Generate</button>
</div>

CSS

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #feead9;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.container img {
  border: 1px solid;
  border-radius: 5px;
}

.container button {
  background: #87a4fe;
  width: fit-content;
  padding: 1rem 3rem;
  border: none;
  border-radius: 5px;
  font-family: monospace;
  font-size: 1.15rem;
}

JavaScript

const img = document.querySelector("img");
const button = document.querySelector("button");

button.addEventListener("click", async () => {
	const file = await ten_print(500, 500);
  
  img.src = file;
});

const colors = [
  {
    bg: "rgb(20, 5, 10)",
    right: "rgb(255, 10, 50)",
    left: "rgb(10, 255, 50)",
  },
  {
    bg: "rgb(50, 150, 255)",
    right: "rgb(25, 7, 10)",
    left: "rgb(250, 255, 253)",
  },
  {
    bg: "rgb(255, 100, 200)",
    right: "rgb(255, 200, 250)",
    left: "rgb(100, 24, 150)",
  },
  {
    bg: "rgb(25, 255, 50)",
    right: "rgb(255, 10, 54)",
    left: "rgb(175, 190, 255)",
  },
  {
    bg: "rgb(255, 220, 250)",
    right: "rgb(10, 12, 255)",
    left: "rgb(200, 10, 20)",
  },
];

function ten_print(width, height) {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");
  let edge, cellsX, cellsY, color;

  canvas.width = width;
  canvas.height = height;
  edge = ~~(Math.random() * 20 + 20);
  cellsX = canvas.width / edge;
  cellsY = canvas.height / edge;
  color = colors[~~(Math.random() * colors.length)];

  context.fillStyle = color.bg;
  context.fillRect(0, 0, canvas.width, canvas.height);

  context.lineWidth = 2;
  for (let x = 0; x < cellsX; x++)
    for (let y = 0; y < cellsY; y++) {
      context.beginPath();
      let rand = Math.random();
      if (rand < 0.5) {
        context.strokeStyle = color.right;
        context.moveTo(x * edge, y * edge);
        context.lineTo((x + 1) * edge, (y + 1) * edge);
      } else {
        context.strokeStyle = color.left;
        context.moveTo((x + 1) * edge, y * edge);
        context.lineTo(x * edge, (y + 1) * edge);
      }
      context.stroke();
    }
  return new Promise((resolve) => resolve(canvas.toDataURL()));
}