Excalidraw: Canvas All The Way Down
summary
Excalidraw adds labeled arrows by drawing arrow paths and measured text onto HTML Canvas, handling multi-line text manually and linking label IDs to arrow IDs. Batching strokes into a single polyline cuts draw time (thousands of points: ~0.3ms vs ~6.4ms), clearRect beats clipping by orders of magnitude (e.g. 16ms vs 302ms; 120ms vs 12,551ms in big loops), and offscreen canvas caching speeds repeated labels (≈2.4ms vs ≈36.4ms for 1,000 items). SVG export uses masking; avoid floating-point coords.
AI-written summary · about
chapters (20)
- 0:00in this talk…
- 0:43introducing labeled arrows and Aakansha
- 1:31what are labeled arrows?
- 3:09basic requirements of labeled arrows
- 5:02rendering arrows in canvas
- 8:00demo time: rendering arrows
- 9:51rough.js
- 10:24rendering label on top of arrow
- 12:30computing text dimensions
- 13:48clearRect approach
- 14:28clipping approach
- 16:35demo time: clipping approach
- 20:28linking the label to the arrow
- 22:20support export to svg
- 23:30svg masking
- 26:29performance improvements
- 27:14demo time: off-screen canvas
- 28:28avoiding floating point values
- 29:46takeaways
- 30:55audience questions and answers
related talks
39mBuilding Better Interfaces With SVG
29m"Hand Coded Artisanal Data-Visualization"
30mMaps Platform: A Deep Dive on Building for Performance and Scale
26mIf it moves they will watch it
33mCoding Art
28mHTML Canvas 어디까지 써봤니
24mMaking SVG and Canvas Graphics in Angular
32mIntro to Web Graphics with HTML5 Canvas