JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<canvas width="60" height="20" id="canvas"/>

CSS

canvas {
  transform: scale(5);
  transform-origin: top left;
}

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let x = 0; x < canvas.width; x++) {
  for (let y = 0; y < canvas.height; y++) {
    const i = (y * canvas.width + x) * 4;
    if (x < 10 && y < 10) {
      data.data[i + 0] = 255;
      data.data[i + 1] = 0;
      data.data[i + 2] = 0;
      data.data[i + 3] = 255;
      continue;
    }
    const fx = x / canvas.width;
    const fy = y / canvas.height;
    data.data[i + 0] = 100;
    data.data[i + 1] = fy * 255;
    data.data[i + 2] = fx * 255;
    data.data[i + 3] = 255;
  }
}
ctx.putImageData(data, 0, 0);