pierrelf.com
Phase 18: Canvas 2D API — Issue 7/10#
Implement text drawing on the canvas 2D context, integrating with the text crate.
Dependencies#
- Canvas element infrastructure (issue 1)
- Canvas state management & transformation matrix (issue 2)
- Canvas rectangle operations & color styles (issue 3, for fillStyle/strokeStyle)
Requirements#
Font property:
ctx.font— CSS font shorthand string (e.g., '16px sans-serif', 'bold 24px monospace')- Parse font shorthand: style, variant, weight, size, family
- Map family names to system fonts via the
textcrate font loader - Default: '10px sans-serif'
- Invalid font strings are silently ignored
Text alignment & baseline:
textAlign: 'start' (default), 'end', 'left', 'right', 'center'textBaseline: 'alphabetic' (default), 'top', 'hanging', 'middle', 'ideographic', 'bottom'direction: 'ltr', 'rtl', 'inherit'
Drawing:
fillText(text, x, y, maxWidth?)— fill text glyphs at (x, y)strokeText(text, x, y, maxWidth?)— stroke text glyph outlines at (x, y)- Position based on textAlign and textBaseline relative to (x, y)
- When maxWidth is provided and text would be wider, scale horizontally to fit
- Apply current CTM to text positioning
Measurement:
measureText(text)→ TextMetrics object- TextMetrics properties: width, actualBoundingBoxLeft, actualBoundingBoxRight, actualBoundingBoxAscent, actualBoundingBoxDescent, fontBoundingBoxAscent, fontBoundingBoxDescent
Integration with text crate:
- Use the text crate's font parser for glyph lookup
- Use the text crate's rasterizer for glyph bitmap generation
- Use the text crate's shaper for horizontal advance/kerning
Acceptance criteria#
ctx.fillText('Hello', 50, 50)renders text on the canvas- Font property parsing handles common CSS font strings
- textAlign and textBaseline correctly position text relative to the anchor point
- measureText returns accurate width measurements
- strokeText renders glyph outlines
- maxWidth constrains text width
- Unit tests for font parsing and text measurement