Pixel Resolve Text — Canvas Text That Sharpens From Blocks

<main class="stage">
  <h1 class="sr">Crisp at last</h1>
  <canvas id="cv" role="img" aria-label="Crisp at last"></canvas>
  <div class="row">
    <button type="button" id="resolve" class="primary">Resolve</button>
    <button type="button" id="pixelate" class="ghost">Pixelate</button>
    <label class="pace">Steps
      <select id="steps" aria-label="Number of resolution steps">
        <option value="6">6 (jumpy)</option>
        <option value="9" selected>9</option>
        <option value="14">14 (smooth)</option>
      </select>
    </label>
  </div>
</main>

*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:grid;place-items:center;background:#0d1117;font-family:system-ui,sans-serif}
.stage{display:grid;gap:26px;justify-items:center;padding:24px 16px;width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
canvas{width:min(760px,100%);height:auto;aspect-ratio:760/220;display:block;border:1px solid #232b38;border-radius:14px;background:#10161f}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
button,select{font:600 13px system-ui,sans-serif;border-radius:999px;cursor:pointer}
.primary{color:#04140a;background:#4ade80;border:0;padding:10px 24px}
.ghost{color:#d3dbe8;background:transparent;border:1px solid #394456;padding:9px 20px}
.pace{display:flex;align-items:center;gap:8px;font-size:13px;color:#8996ab}
select{color:#d3dbe8;background:#161d29;border:1px solid #394456;padding:8px 12px}
:focus-visible{outline:2px solid #4ade80;outline-offset:3px}

var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');
var TEXT = 'Crisp at last';
var W = 760, H = 220, DPR = Math.min(window.devicePixelRatio || 1, 2);
cv.width = W * DPR; cv.height = H * DPR;

// 1. Draw the sharp text once onto an offscreen canvas
var src = document.createElement('canvas');
src.width = cv.width; src.height = cv.height;
var sctx = src.getContext('2d');
function drawSource() {
  sctx.clearRect(0, 0, src.width, src.height);
  var g = sctx.createLinearGradient(0, 0, src.width, 0);
  g.addColorStop(0, '#4ade80'); g.addColorStop(1, '#38bdf8');
  sctx.fillStyle = g;
  sctx.textAlign = 'center'; sctx.textBaseline = 'middle';
  var size = 118 * DPR;                                  // largest size; shrinks if the text would not fit
  var face = 'px "Arial Black", Impact, sans-serif';
  sctx.font = '900 ' + size + face;
  var fit = (src.width * 0.88) / sctx.measureText(TEXT).width;
  if (fit < 1) { size *= fit; sctx.font = '900 ' + size + face; }
  sctx.fillText(TEXT, src.width / 2, src.height / 2 + 6 * DPR);
}

// 2. To fake a low resolution: shrink the source into a tiny canvas, then stretch it back with smoothing off
var tiny = document.createElement('canvas');
var tctx = tiny.getContext('2d');
function showAtBlock(b) {
  ctx.clearRect(0, 0, cv.width, cv.height);
  if (b <= 1) { ctx.drawImage(src, 0, 0); return; }
  var w = Math.max(1, Math.round(cv.width / b)), h = Math.max(1, Math.round(cv.height / b));
  tiny.width = w; tiny.height = h;
  tctx.clearRect(0, 0, w, h);
  tctx.drawImage(src, 0, 0, w, h);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(tiny, 0, 0, w, h, 0, 0, cv.width, cv.height);
}

// Block sizes shrink geometrically from very chunky down to the real pixels
function sizes(n) {
  var out = [];
  for (var i = 0; i < n; i++) out.push(Math.max(1, Math.round(64 * DPR * Math.pow(1 / (64 * DPR), i / (n - 1)))));
  out[n - 1] = 1;
  return out;
}

var timer = null;
function play(reverse) {
  clearTimeout(timer);
  var list = sizes(parseInt(document.getElementById('steps').value, 10));
  if (reverse) list.reverse();
  var i = 0;
  (function next() {
    showAtBlock(list[i++]);
    if (i < list.length) timer = setTimeout(next, 150);
  })();
}

document.getElementById('resolve').addEventListener('click', function () { play(false); });
document.getElementById('pixelate').addEventListener('click', function () { play(true); });

drawSource();
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) showAtBlock(1);
else play(false);