Open code, practice, and notes →
Download source with English comments · for reading
Canvas 2D · 07 Text and Badge Composition
Series contents · Technology map
Stage: Pixels and Drawing State · Editable example · Storage ID: canvas-2d-step-07
Goals and learning outcomes
- The background width adjusts to the text length.
- Record layout differences after changing the baseline.
Prerequisites
Prerequisite concepts: Asynchronous Images, Source Rectangle. Prepare the result files and observation records from Unit 6.
Key concepts and explanations
Measuring Text
measureText returns measurements for the current font settings. Calculating from string length alone misestimates the widths of Korean and English text.
Text Baseline
textBaseline determines what the y coordinate refers to. Centering requires consideration of the baseline as well as text width.
Practice setup
First check the execution scope guidance on the example screen. The following describes preparation for extending the assignment in a separate project. Implement this yourself in an HTML and ES module project on a separate local HTTP development server. Record the browser version, viewport, and DPR.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Prepare day-07.js and index.html in the external practice project. Set font, calculate badge width with measureText, and display a name with fillText.
- Accept a Korean name and a long English name, then compare the badge PNG appearances with consistent padding.
- Save the output with the input condition 가나, then run again with WWW iii. Expected: Even with similar character counts, badge width varies with actual glyph widths. Compare this with the actual screen and logs, and record the actual results and reasons for differences in day-07-notes.md.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Input String | 가나 | WWW iii | Even with similar character counts, badge width varies with actual glyph widths |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The background width adjusts to the text length.
- Record layout differences after changing the baseline.
Self-check
- Why might measurements differ before a font loads?
- Which names break a width calculation based only on character count?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an editable browser experiment. Measurements vary with the current device and browser.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Loading and Cropping Images · Next: The Animation Clock