Canvas 2D and OffscreenCanvas

When the DOM Isn't Enough

The DOM is great for documents, layouts, and interactive UI. But try drawing a real-time chart with 10,000 data points, or applying a blur filter to an image pixel by pixel, or rendering a 2D game at 60fps. The DOM becomes a bottleneck — each element is a full object in memory with styles, layout, events, and accessibility metadata.

Canvas gives you a raw pixel buffer. You draw directly — shapes, text, images, pixels — with no DOM overhead. One element, infinite visual complexity.

Canvas 2D Basics

<canvas id="myCanvas" width="800" height="600"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

The ctx (CanvasRenderingContext2D) is your drawing API. Everything goes through it.

Drawing Shapes

ctx.fillStyle = 'var(--color-accent, #3b82f6)';
ctx.fillRect(10, 10, 200, 100);

ctx.strokeStyle = 'var(--color-danger, #ef4444)';
ctx.lineWidth = 2;
ctx.strokeRect(10, 10, 200, 100);

ctx.beginPath();
ctx.arc(300, 200, 50, 0, Math.PI * 2);
ctx.fill();

ctx.beginPath();
ctx.moveTo(400, 100);
ctx.lineTo(500, 200);
ctx.lineTo(400, 200);
ctx.closePath();
ctx.stroke();

Drawing Text

ctx.font = '24px system-ui, sans-serif';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello Canvas', canvas.width / 2, canvas.height / 2);

const metrics = ctx.measureText('Hello Canvas');
console.log('Width:', metrics.width);

Drawing Images

const img = new Image();
img.src = '/photo.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  ctx.drawImage(img, 0, 0, 200, 150);
  ctx.drawImage(img, 50, 50, 100, 100, 0, 0, 200, 200);
};

The three-argument form draws at position. The five-argument form scales. The nine-argument form crops a source rectangle and draws it to a destination rectangle — essential for sprite sheets.

Pixel Manipulation

Canvas gives you direct access to the pixel buffer:

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;

for (let i = 0; i < pixels.length; i += 4) {
  const r = pixels[i];
  const g = pixels[i + 1];
  const b = pixels[i + 2];

  const gray = 0.299 * r + 0.587 * g + 0.114 * b;
  pixels[i] = gray;
  pixels[i + 1] = gray;
  pixels[i + 2] = gray;
}

ctx.putImageData(imageData, 0, 0);

imageData.data is a Uint8ClampedArray — each pixel is 4 bytes (R, G, B, A). The clamped part means values are automatically clamped to 0-255.

Image Processing Pipeline

For real image processing, process in a worker using OffscreenCanvas or transfer the ImageData buffer:

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

worker.postMessage(
  { type: 'blur', pixels: imageData.data.buffer, width: canvas.width, height: canvas.height },
  [imageData.data.buffer]
);

The ArrayBuffer is transferred (zero-copy) to the worker, which processes it and transfers it back.

Transformations

Canvas supports an affine transformation matrix:

ctx.save();

ctx.translate(200, 200);
ctx.rotate(Math.PI / 4);
ctx.scale(2, 2);

ctx.fillRect(-25, -25, 50, 50);

ctx.restore();

save() and restore() push/pop the entire canvas state (transform, styles, clip region) on a stack. Always pair them — forgetting restore() is the source of countless canvas bugs.

Compositing

ctx.globalCompositeOperation = 'multiply';
ctx.globalAlpha = 0.5;

Composite operations control how new drawing blends with existing pixels. source-over (default) draws on top. multiply creates photographic blend effects. destination-out erases. There are 26 composite modes total.

OffscreenCanvas: Rendering in Workers

OffscreenCanvas lets you use the Canvas API inside a Web Worker — no DOM required. This is transformative for performance: heavy rendering (charts, image processing, games) moves off the main thread entirely.

Transfer Control to a Worker

const canvas = document.getElementById('gameCanvas');
const offscreen = canvas.transferControlToOffscreen();

const worker = new Worker('/render-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

In the worker:

let ctx;

self.onmessage = (event) => {
  const canvas = event.data.canvas;
  ctx = canvas.getContext('2d');

  requestAnimationFrame(draw);
};

function draw() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  ctx.fillStyle = '#3b82f6';
  ctx.fillRect(Math.random() * 800, Math.random() * 600, 50, 50);

  requestAnimationFrame(draw);
}

The worker now owns the canvas. requestAnimationFrame works inside workers when using OffscreenCanvas. The main thread stays free for event handling and DOM updates.

Standalone OffscreenCanvas (No DOM)

You can also create an OffscreenCanvas without any visible canvas element — useful for generating images in a worker:

const offscreen = new OffscreenCanvas(800, 600);
const ctx = offscreen.getContext('2d');

ctx.fillStyle = '#000';
ctx.font = '48px serif';
ctx.fillText('Generated in a worker', 50, 100);

const blob = await offscreen.convertToBlob({ type: 'image/png' });

self.postMessage({ imageBlob: blob });

Performance Patterns

Layered Canvases

Instead of one canvas, use multiple stacked canvases:

<div style="position: relative">
  <canvas id="background" style="position: absolute"></canvas>
  <canvas id="sprites" style="position: absolute"></canvas>
  <canvas id="ui" style="position: absolute"></canvas>
</div>

The background redraws rarely. Sprites redraw every frame. UI redraws on interaction. By separating layers, you avoid redrawing static content every frame.

requestAnimationFrame Loop

let lastTime = 0;

function gameLoop(timestamp) {
  const delta = timestamp - lastTime;
  lastTime = timestamp;

  update(delta);
  render();

  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

Never use setInterval for animation. requestAnimationFrame syncs with the display refresh rate, pauses in background tabs, and gives you a timestamp for frame-independent animation.

Avoid Layout Thrashing

Reading canvas properties after drawing can force a layout recalculation. Batch your reads before your draws.

Pre-render to Off-Screen Buffers

For complex static elements, render once to an off-screen canvas and drawImage it every frame:

const spriteBuffer = document.createElement('canvas');
spriteBuffer.width = 100;
spriteBuffer.height = 100;
const spriteCtx = spriteBuffer.getContext('2d');

drawComplexSprite(spriteCtx);

function render() {
  ctx.drawImage(spriteBuffer, x, y);
}

drawImage with a canvas source is very fast — the browser copies pixel data directly, no re-rasterization.

Real-World Use Cases

• Charts and data visualization: D3.js uses canvas for large datasets. Recharts/Chart.js render to canvas for performance.
• Image editors: Crop, resize, filter, annotate. Pixel-level control is essential.
• 2D games: Sprite rendering, tile maps, particle systems. Canvas is the standard for browser games.
• PDF rendering: pdf.js renders PDF pages to canvas.
• Signature capture: Touch input mapped to canvas paths.