demo · v141

Canvas Text Layout Debugger

Draw any text on a canvas and overlay every metric the enhanced TextMetrics API exposes — actual bounding box, font bounding box, baseline, ascent/descent lines, advance width, and per-grapheme cluster rectangles. Toggle overlays and slide the selection range to explore.

probing TextMetrics extensions…

text presets

actual bounding box
font bounding box
alphabetic baseline
selection rect
grapheme clusters
—

live metric table

metricvaluenote
Draw text above to populate metrics.

the code

const ctx = canvas.getContext("2d");
ctx.font = "36px serif";
ctx.textBaseline = "alphabetic";

const tm = ctx.measureText(text);

// Classic metrics (all browsers)
tm.width;                    // advance width
tm.actualBoundingBoxAscent;  // above alphabetic baseline
tm.actualBoundingBoxDescent; // below alphabetic baseline

// New in Chrome 141
const selRects = tm.getSelectionRects(start, end);
// → [{x, y, width, height}, …]  — char-level rectangles

const fullBox = tm.getActualBoundingBox(0, text.length);
// → {x, y, width, height}       — tight glyph bounding box

const clusters = tm.getTextClusters?.();
// → [{x, y, width, height, begin, end}, …] — grapheme cluster rects

see also