When using WebGL, you have to do everything yourself, including font rendering and layouting. I thought: “Wouldn’t it be great if you could just reuse the browser’s layouting and font-rendering engine instead of heaving to reinvent the wheel?” Yes, but there's no API for that. Or is there?TL;DR: You can use <foreignObject> to embed normal HTML content in an SVG.

10m read timeFrom surma.dev
Post cover image
Table of contents
Step 1: Foreign ObjectsStep 2: Drawing it to canvasStep 3: Styles and resourcesBonus round: StatePerformanceRecap

Sort: