Canvas 2D Performance

When to use this

• You are rendering 500-5,000 moving shapes or a complex scene graph on a 2D canvas.
• Frame rate is dropping below 60fps and you need to diagnose and fix the bottleneck.
• You need layered canvases, offscreen canvas workers, or dirty-rect invalidation.
• You are building a chart, game, or interactive visualization that must stay in 2D.
• Do NOT use this for particle systems above 10k elements or shader-driven effects -- see webgl-particle-systems or ogl-lightweight-webgl instead.

Mental model

The Canvas 2D context is an immediate-mode rasterizer. Every fillRect, stroke, drawImage call rasterizes pixels into the bitmap immediately. There is no retained scene graph. If you want to move a circle, you clear the area and redraw it.

The performance hierarchy, from cheapest to most expensive per frame:

1. drawImage() of a pre-rendered canvas/bitmap -- the GPU copies a texture. Fastest.
2. fillRect() -- simple axis-aligned fill, no path tessellation.
3. Straight-line lineTo() paths -- path building is cheap, stroke is moderate.
4. arc(), bezierCurveTo() -- curve tessellation adds CPU work per segment.
5. fillText() / strokeText() -- font rasterization is the most expensive single call. Cache text to an offscreen canvas.
6. getImageData() / putImageData() -- pixel readback stalls the GPU pipeline. Avoid per-frame.