Canvas API — 2D Drawing

Also Known As

TL;DR

Explanation

A <canvas> element provides a bitmap drawing surface. JavaScript obtains a 2D rendering context via canvas.getContext('2d') and draws using methods like fillRect(), arc(), drawImage(), and fillText(). Canvas is immediate mode — you draw commands execute immediately and the result is just pixels; there is no retained object graph like SVG. This makes Canvas fast for many operations but means you must redraw everything on each frame for animations. The CanvasRenderingContext2D API includes path drawing (beginPath, moveTo, lineTo, arc), fill and stroke styles (colours, gradients, patterns), text rendering, image compositing, and transformations (translate, rotate, scale). For 3D, use WebGL or WebGPU via getContext('webgl2') instead.

Common Misconception

Why It Matters

Common Mistakes

• Not accounting for devicePixelRatio — canvas renders blurry on retina screens; multiply width/height by devicePixelRatio and scale the context.
• Forgetting ctx.beginPath() before drawing paths — paths accumulate; without beginPath(), new shapes join the previous path, producing unexpected fills.
• Setting canvas size with CSS instead of the width/height attributes — CSS scales the bitmap (blurry); the attributes set the actual resolution.
• Doing heavy computation inside the animation loop — move data processing outside requestAnimationFrame and only draw inside it.

Code Examples

// ❌ Leaking context state, not clearing between frames
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red'; // Never reset — affects all subsequent draws
ctx.translate(100, 100); // Cumulative! Each frame moves 100px further

function draw() {
    // Missing: ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.fillRect(0, 0, 50, 50); // Draws over previous frame
    requestAnimationFrame(draw);
}

// ✅ Proper canvas animation loop
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let x = 0;

function draw() {
    // Clear the entire canvas each frame
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Save/restore to isolate state changes
    ctx.save();
    ctx.fillStyle = 'royalblue';
    ctx.translate(x, 100);
    ctx.fillRect(-25, -25, 50, 50); // Centred rect
    ctx.restore(); // fillStyle and translate are gone

    x = (x + 2) % canvas.width; // Loop across canvas
    requestAnimationFrame(draw);
}

// Set canvas resolution to match device pixel ratio (crisp on retina)
const dpr = window.devicePixelRatio || 1;
canvas.width  = canvas.offsetWidth  * dpr;
canvas.height = canvas.offsetHeight * dpr;
ctx.scale(dpr, dpr);

draw();

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• ↗ https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

Tags

Related Terms