v138 · canvas

Live Thumbnail

Every time you edit the document on the left, drawElement() re-rasterises it into the thumbnail canvas on the right. Real-time DOM snapshot — no manual rendering, no SVG foreignObject workaround.

checking…
2×

Live Document Preview

Edit this text and watch the thumbnail update in real-time on the right. drawElement() rasterises the live DOM — complete with fonts, colors, and formatting.

How it works

The browser paints the contenteditable div directly onto the canvas via ctx.drawElement(). No SVG foreignObject, no html2canvas, no screenshot API. Pure Chrome 138+ native.

Try bold, italics, or changing the text color — the thumbnail reflects every change immediately.

thumbnail preview
No capture yet.
const docEl = document.getElementById('doc');
const canvas = document.getElementById('thumb');
const ctx    = canvas.getContext('2d');

// Scale thumbnail to 2× canvas pixels for retina
const SCALE = 2;

function captureThumb() {
  if (!ctx.drawElement) return;
  ctx.save();
  ctx.scale(SCALE / (docEl.offsetWidth / canvas.width),
            SCALE / (docEl.offsetHeight / canvas.height));
  ctx.drawElement(docEl, 0, 0);
  ctx.restore();
}

// Re-capture on every edit
docEl.addEventListener('input', captureThumb);

// Or use requestAnimationFrame for throttled updates
function rafLoop() {
  captureThumb();
  requestAnimationFrame(rafLoop);
}
requestAnimationFrame(rafLoop);

see also