Skip to content

Glossary · Rendering

Canvas Renderer

Also known as: Canvas2D Rendering.

A graph renderer that draws nodes and edges onto an HTML5 <canvas> element using the Canvas2D API, instead of creating SVG or DOM elements per node.

Graph visualization libraries can render in three ways: SVG (one DOM element per node), Canvas2D (procedural drawing onto a single canvas element), or WebGL (GPU-accelerated drawing). Canvas2D sits in the middle: faster than SVG for thousands of nodes (because there is no DOM overhead per node) and more compatible than WebGL (no driver issues, no blocked contexts, works in every browser).

A Canvas2D renderer redraws the entire scene on every animation frame, using level-of-detail and spatial indexing to keep the work proportional to what the user can actually see. It is the right default for graphs in the 1,000–50,000 node range — comfortable on commodity hardware without the operational complexity of WebGL.

TopoKit's default renderer is Canvas2D (`@topokit/renderer-canvas`), under 80 KB gzipped, with a 4-tier LOD pipeline.