Developer notes · web game engineering
Canvas vs. WebGL vs. DOM: Choosing the Rendering Runtime for Browser Games
Three rendering runtimes, three correct use cases, one decision rule. A catalog survey — from Geometry Arrow's canvas to Bloxd.io's WebGL to Mind Bender's DOM — of where each runtime earns its complexity.
T
h
e
d
e
c
i
s
i
o
n
r
u
l
e
M
a
t
c
h
t
h
e
r
u
n
t
i
m
e
t
o
t
h
e
s
t
a
t
e
m
o
d
e
l
:
d
i
s
c
r
e
t
e
s
t
a
t
e
→
D
O
M
;
c
o
n
t
i
n
u
o
u
s
2
D
s
t
a
t
e
→
c
a
n
v
a
s
2
D
;
c
o
n
t
i
n
u
o
u
s
3
D
o
r
s
h
a
d
e
r
-
b
o
u
n
d
e
f
f
e
c
t
s
→
W
e
b
G
L
.
E
v
e
r
y
m
i
s
a
s
s
i
g
n
m
e
n
t
s
h
o
w
s
u
p
a
s
e
i
t
h
e
r
w
a
s
t
e
d
e
n
g
i
n
e
e
r
i
n
g
(
f
r
a
m
e
w
o
r
k
f
o
r
a
g
r
i
d
g
a
m
e
,
W
e
b
G
L
f
o
r
f
l
a
t
s
p
r
i
t
e
s
)
o
r
a
p
e
r
f
o
r
m
a
n
c
e
w
a
l
l
(
D
O
M
f
o
r
p
e
r
-
f
r
a
m
e
a
n
i
m
a
t
i
o
n
)
.
T
h
e
c
a
t
a
l
o
g
o
f
f
e
r
s
v
e
r
i
f
i
e
d
e
x
a
m
p
l
e
s
o
f
a
l
l
t
h
r
e
e
a
s
s
i
g
n
m
e
n
t
s
d
o
n
e
c
o
r
r
e
c
t
l
y
.
DOM: the discrete-state champion
Mind Bender Puzzles renders through DOM with CSS transitions: free accessibility, free text layout, free hit-testing, flat memory. DOM loses only when state changes per-frame — layout thrash makes 60fps updates expensive. For puzzle, card, and turn-based formats, DOM is not the fallback; it is the optimum.
Canvas 2D: the 2D continuous sweet spot
Geometry Arrow renders flat-shaded 2D at 60fps on canvas: sprites, trails, and obstacles in a handful of draw calls. Canvas wins here because frames are the unit of work and the state is continuous (positions, velocities). The fixed-timestep-plus-interpolation pattern decouples simulation from rendering, keeping physics deterministic across frame rates — the pattern this catalog's canvas titles share.
WebGL: paying for what you use
Bloxd.io needs WebGL for voxel worlds: greedy meshing, chunk culling, texture atlasing. WebGL's complexity — shader compilation, buffer management, state machines — pays only when the render workload exceeds canvas 2D's comfortable range (roughly: hundreds of distinct sprites, or true 3D). Bloxd sits firmly beyond that line; Geometry Arrow sits firmly below it. Both are correct.
The hybrid pattern
Compilation formats (Ultimate Sports Arena) split runtimes: DOM hub UI over canvas event scenes. The split respects each layer's state model and keeps shared UI consistent. The lesson generalizes: runtime choice is per-subsystem, not per-project — and the architectures that admit this are the ones that scale across a catalog.
Frame budgets and the 16.6ms rule
Whichever runtime you choose, the frame budget is identical: 16.6 milliseconds at 60fps, minus input handling, minus game logic. Canvas 2D spends most of its budget in draw calls; WebGL spends it in CPU-side buffer preparation; DOM spends it in style recalculation. Profiling each runtime against its own cost profile — not against a universal benchmark — is how the catalog’s titles stay smooth on five-year-old hardware. The profiling habit is also the debugging habit: a dropped frame names its runtime, and each runtime names its own expensive operations.
The asset pipeline dimension
Runtime choice also fixes the asset pipeline. DOM takes SVG and CSS (resolution-independent, tiny payloads); canvas takes sprite sheets (atlas-packed, resolution-bounded); WebGL takes texture atlases and buffer-friendly geometry (preprocessed, larger). Asset decisions made before the runtime decision get remade after it — the catalog’s titles chose runtimes first, then designed assets to the runtime’s strengths, which is why their payloads stay small even where the runtime is heavy.
All developer notes · Review portal · About the engineering desk