v141 · graphics

Enhanced Canvas TextMetrics

Expand the TextMetrics Canvas API to support selection rectangles, bounding box queries, and glyph cluster-based operations.

concepts

  1. Rich TextMetrics

    Canvas measureText() now returns per-line and per-glyph bounding rects. Canvas-based editors get exact hit-test data without manual layout.

  2. Selection Rects

    Drag a selection over text painted on a canvas and watch the platform return the exact rectangles it would highlight — across bidi runs, ligatures, and shaped scripts. The piece canvas-based editors used to fake by stacking substring widths.

  3. Grapheme Clusters

    getTextClusters returns the user-perceived characters — emoji ZWJ sequences, regional indicators, combining marks — with positions ready to animate. Each glyph rendered through its own translate/rotate, no Intl.Segmenter import required.

  4. Text Layout Debugger

    Canvas with editable text — click "Measure" to overlay bounding boxes, baseline, ascent/descent lines, advance width, and em box in distinct colors. Selection rect sliders show getSelectionRects(start, end). Presets cover ASCII, Arabic, emoji ZWJ sequences, Japanese, and mixed script.

  5. Font Comparison

    Same string rendered in serif, sans-serif, monospace, and cursive with every measureText() metric overlaid — actual bounding box, em height, alphabetic/ideographic baselines, font bounding box. A numeric comparison table shows how the values diverge across typefaces.

  6. Animated Glyphs

    Wave, scatter, orbit, bounce, spin, and typewriter animations driven entirely by getTextClusters() positions — each glyph, including emoji ZWJ sequences, gets its own translate/rotate. Includes a cluster inspector showing the per-glyph x, y, width values.

why it shipped

The existing TextMetrics API provides measurements for atomic text, but offers no facilities to break down that information to a more granular level.

references