Canvas API
ELI5 — The Vibe Check
The Canvas API gives you a blank rectangle and says 'draw whatever you want with code.' It's like MS Paint but controlled by JavaScript. Great for games, charts, image manipulation, and making your designer colleagues nervous because there are no design files.
Real Talk
The HTML Canvas API provides a 2D drawing surface manipulated via JavaScript. It supports paths, shapes, text, images, pixel manipulation, and compositing. Canvas renders as a bitmap, making it ideal for dynamic graphics, games, and real-time visualizations but not inherently accessible.
Show Me The Code
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#2563eb';
ctx.fillRect(10, 10, 150, 80);
ctx.strokeText('Hello Canvas', 20, 55);
When You'll Hear This
"Use Canvas for the signature pad — SVG would be overkill" / "Canvas is fast for pixel manipulation but you lose DOM accessibility"
Related Terms
D3.js
D3.js turns data into beautiful, interactive visualizations. It's absurdly powerful and has a learning curve shaped like a cliff.
SVG Animation
SVG animation brings vector graphics to life with smooth, scalable motion that looks sharp on any screen.
WebGL
WebGL gives your browser direct access to the GPU for rendering 2D and 3D graphics at blazing speed.