Measuring text that isn't on screen yet
Koncept
Generating a design automatically means knowing how big the text will be before you have drawn anything. The browser already knows. You just have to ask it.
Why the canvas can't answer this
Canvas text metrics do not account for wrapping, hyphenation or the exact font fallback the page ended up using.
Rendering offscreen and measuring for real
Describe the offscreen React render, and why getBoundingClientRect on real DOM
nodes gives numbers the canvas can trust.
The traps
Fonts that have not loaded yet, and why document.fonts.ready is not optional.
Devices where the fallback font measures differently.