How Excalidraw Handles 10,000 Shapes (Frontend System Design)

Frontend System Design Essentials — Course: https://icodeit.thinkific.com/courses/frontend-system-design-essentials Frontend System Design Essentials — Book: https://leanpub.com/frontend-system-design-essentials/ Figma, Excalidraw, and Miro feel simple to use. Drag a rectangle, zoom out, connect two shapes. Drawing one rectangle really is easy — but what happens when the canvas holds ten thousand of them and you still need selection and dragging to stay near 60 frames per second? With SVG, every shape is a DOM node the browser styles, lays out, and hit-tests for you. That convenience has a cost as the scene grows. Canvas gives you a drawing surface instead — and hands back responsibility for the scene, selection, and hit testing. This is Part 1, the single-user system. We keep the drawing in our own scene model, convert pointer positions into scene coordinates, hit-test shapes ourselves, shrink the search space with a spatial index, and control how much work happens per frame. Part 2 makes the same system collaborative. You'll learn: Why SVG's retained scene stops scaling, and when Canvas earns its complexity Why the scene model — not the Canvas API — is your real application state How hit testing works when there is no element under the pointer What a spatial index does, and what it deliberately does not replace Three ways to protect a frame budget: requestAnimationFrame, viewport culling, temporary interaction state Final takeaway: Canvas is not automatically faster than SVG. It gives you control over what gets rendered and when — and rendering performance is mostly about limiting the work inside each frame. 📘 MY BOOKS & COURSES 👉 Frontend System Design Essentials (Course): https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials (Book): https://leanpub.com/frontend-system-design-essentials/ 👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971 👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react 📩 STAY CONNECTED 🧠 Newsletter (system design & clean code): https://juntao.substack.com 🌐 Website & Blog: https://icodeit.com.au 🐦 Twitter / X: http://twitter.com/JuntaoQiu 📺 YouTube (subscribe): https://www.youtube.com/@icodeit.juntao JetBrains has kindly provided a 20% discount for viewers of this channel. Use the code ICODEIT20 when purchasing a personal annual license from the JetBrains store. The code is valid until June 30, 2027. For transparency: JetBrains has also provided me with a complimentary All Products Pack license. There are no requirements around what I say about their tools. #frontend #systemdesign #canvas #performance #javascript #figma #webdevelopment