JS Graphics
Browsers expose several ways to draw graphics. Each has a sweet spot — SVG for structured shapes, Canvas for pixel work, WebGL/WebGPU for hardware-accelerated 3D, libraries on top for charts.
Pick by purpose
| API / library | Best for | Notes |
|---|---|---|
| SVG | Icons, charts, diagrams, interactive maps. | Markup-based, scales without blur, indexed by the DOM. |
| Canvas 2D | Pixel-level work — games, image editors. | Bitmap surface. Faster than SVG for thousands of shapes. |
| WebGL | 3D scenes, shader effects. | OpenGL ES 2/3 via the GPU. Use Three.js to stay sane. |
| WebGPU | Cutting-edge compute + render. | Successor to WebGL — Chromium first. |
| Chart.js / Recharts / Plotly | Business charts on top of Canvas/SVG. | Drop-in. |
| D3 | Custom data-driven visualisations. | Powerful but a real learning curve. |
Decision tree
- ≤ ~hundreds of shapes, need interactivity per shape → SVG.
- Thousands of moving particles, animations → Canvas 2D.
- 3D, custom shaders, GPU compute → WebGL / WebGPU (with a wrapper).
- Standard chart: bar/line/pie → Chart.js or similar.
- Bespoke data visualisation → D3.
Coordinate systems
| System | Origin | Y-axis |
|---|---|---|
| SVG / Canvas 2D | Top-left of the element | Down is positive |
| WebGL / WebGPU | Centre of the viewport (NDC) | Up is positive |
Tip: Start with SVG. Most "I need a chart" problems are solved before you hit its performance ceiling — and you keep CSS styling and accessibility for free.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Graphics!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Pick the API best for sharp, scalable icons that respond to clicks.
Answer (three letters):
XML-based vector format.
Discussion
Loading…