01 — Two Rendering Pipelines

Every DOM element passes through style calculation, layout, and paint before reaching pixels. Canvas bypasses all three — you draw directly to a pixel buffer.

The right panel shows both pipelines side by side. DOM has five stages: HTML Style Layout Paint Composite. Canvas has three: JS Draw Composite. The difference is not optimization — it's a fundamentally different rendering model.

02 — DOM: The Full Pipeline

Each DOM element is a separate entity in the rendering pipeline. The browser maintains a style tree, a layout tree, and a paint record for every element. When you have N elements:

  • Style calculation: O(N) — each element's computed styles are resolved against the cascade
  • Layout: O(N) — each element's position and size are computed relative to its parent
  • Paint: O(N regions) — each dirty element is repainted into its layer

The right panel expands the DOM pipeline stages, showing the per-element cost multiplied by element count. At 100 elements, this is invisible. At 10,000, each frame costs significant milliseconds.

03 — DOM Advantages

Below ~1,000 elements, DOM is the right default. The browser gives you three things Canvas cannot:

Native events — click, hover, focus, and every pointer event work automatically on every element. Canvas receives a single click coordinate and you must calculate which drawn shape contains it.

Accessibility — every DOM element participates in the accessibility tree. Screen readers can traverse it, tabindex enables keyboard navigation, and aria-* attributes describe semantics. Canvas is a single opaque rectangle to assistive technology.

Text and CSS — the browser handles text wrapping, font rendering, selection highlighting, and style inheritance. In Canvas, you implement all of this yourself.

04 — Canvas: Direct Pixel Buffer

Canvas bypasses the rendering pipeline entirely. You call fillRect(), arc(), or drawImage() and the GPU draws pixels immediately. No style resolution, no layout computation, no paint records.

JS
1const ctx = canvas.getContext("2d");
2ctx.fillStyle = "#3b82f6";
3ctx.fillRect(x, y, width, height);
4ctx.beginPath();
5ctx.arc(cx, cy, radius, 0, Math.PI * 2);
6ctx.fill();

The right panel shows the Canvas API in action — a code block alongside the key insight that each draw call goes straight to the pixel buffer.

05 — The Crossover Point

The right panel has an element count slider. Drag it from 50 to 20,000 and watch where each approach breaks.

Below ~1,000 elements, DOM wins — the overhead is invisible, and you get events, a11y, and CSS for free. Above ~5,000 elements, Canvas wins — each frame's style+layout cost exceeds the 16ms budget, while Canvas draw calls stay under 2ms.

The crossover zone (1,000–5,000) depends on element complexity. Simple div elements push the crossover higher. Complex elements with shadows, borders, and pseudo-elements push it lower.

Google Sheets renders cells on Canvas because a 100×100 grid has 10,000 cells. In the DOM, that's 10,000 style calculations and 10,000 layout boxes per frame. On Canvas, it's 10,000 fillRect calls — an order of magnitude faster.

06 — The Hybrid Pattern

Production applications often combine both: Canvas for the high-volume rendering with a thin DOM overlay for interactive elements.

The right panel shows the two-layer architecture:

  • Canvas layer (bottom): spreadsheet cells, chart data points, whiteboard shapes — the bulk rendering
  • DOM overlay (top): selection handles, tooltips, input fields, context menus — the interaction surface

The Canvas handles the visual bulk while the DOM handles the interaction surface. This is exactly how Figma renders: the design canvas is a WebGL surface, but selection handles, property panels, and menus are DOM elements positioned on top.

07 — Production Examples

Three production apps that demonstrate these patterns:

Figma — WebGL for the design canvas (millions of vectors at any zoom level), DOM for the UI chrome (panels, toolbars, property editors). The canvas is a single GPU texture; interaction happens via hit-testing on a scene graph.

Google Sheets — Canvas 2D for cells (10,000+ cells rendered per frame), DOM overlay for the active cell editor, column/row headers, and context menus. The cell grid is painted in a single pass.

Excalidraw — Canvas 2D for shapes and drawing, DOM for the toolbar, properties panel, and text editing. When you edit text on a shape, a DOM <textarea> is positioned exactly over the Canvas shape.

The Collaborative Whiteboard system design problem explores the Canvas + DOM hybrid architecture in depth, including the scene graph, spatial indexing, and real-time collaboration layer.

Rendering Pipelines

The browser offers two rendering paths. The DOM pipeline runs five stages for every frame. Canvas skips layout entirely and draws pixels directly.

DOM 5 stages
HTML→Style→Layout→Paint→Composite
Canvas 3 stages
JS→Draw→Composite

DOM gives you layout, accessibility, and CSS for free. Canvas gives you raw drawing speed but you manage everything yourself.