Canvas API

Drawing 2D graphics in the browser — shapes, text, images, animations, and pixel manipulation with the HTML5 Canvas.

What it is, in plain English: The Canvas API provides a 2D drawing surface in the browser via the

Where this bites you

A canvas has two sizes: the size CSS displays it at, and its drawing surface, set by the width and height attributes (300 × 150 if you leave them out). Size a canvas only with CSS and your drawing commands still work in the 300 × 150 surface, which is then stretched to fit. Shapes land in the wrong place or disappear past the edge, and everything looks blurry.

// <canvas id="chart" style="width: 600px; height: 300px"></canvas>   <- size set only in CSS
const canvas = document.getElementById("chart");
const ctx    = canvas.getContext("2d");

console.log(canvas.width, canvas.height);                  // the real drawing surface
ctx.fillStyle = "royalblue";
ctx.fillRect(500, 100, 50, 50);                            // meant for the right-hand side
console.log(ctx.getImageData(520, 120, 1, 1).data[3]);     // alpha of a pixel inside that square
// 300 150
// 0          <- nothing there: x = 500 is outside a 300-pixel-wide surface

Drawing on the web

The Canvas API gives you a blank drawing surface in the browser. Unlike HTML elements, canvas has no DOM nodes for each shape — you issue drawing commands and pixels appear. This makes it much faster for things that change constantly, like animations and games.

Setup

<!-- HTML: -->
<canvas id="myCanvas" width="400" height="300"></canvas>

// JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx    = canvas.getContext("2d");   // 2D rendering context

// Canvas coordinate system:
// (0, 0) is top-left
// x increases to the right
// y increases downward

The setup above avoids this by putting width and height on the <canvas> tag itself. When CSS decides the size (a responsive layout, say), copy the displayed size onto the drawing surface in JavaScript, multiplied by devicePixelRatio so it stays sharp on high-density screens. Then scale the context, so you can keep drawing in CSS pixels:

const canvas = document.getElementById("chart");
const ctx    = canvas.getContext("2d");

const dpr  = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();               // the size CSS gave it: 600 x 300
canvas.width  = rect.width  * dpr;                         // match the drawing surface to it
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);                                       // keep drawing in CSS pixels

console.log(canvas.width, canvas.height);
ctx.fillStyle = "royalblue";
ctx.fillRect(500, 100, 50, 50);
console.log(ctx.getImageData(520 * dpr, 120 * dpr, 1, 1).data[3]);   // getImageData uses surface pixels
// 600 300    (1200 600 on a 2x screen)
// 255

Shapes

// Filled rectangle: x, y, width, height
ctx.fillStyle = "royalblue";
ctx.fillRect(10, 10, 100, 50);

// Stroked (outlined) rectangle:
ctx.strokeStyle = "coral";
ctx.lineWidth = 2;
ctx.strokeRect(130, 10, 100, 50);

// Clear a rectangle (erases to transparent):
ctx.clearRect(50, 25, 20, 20);

// Circle using arc():
ctx.fillStyle = "gold";
ctx.beginPath();
ctx.arc(
  250, 35,      // center x, y
  25,           // radius
  0,            // start angle (radians)
  Math.PI * 2   // end angle (full circle = 2π)
);
ctx.fill();   // or ctx.stroke() for outlined

Paths — for complex shapes

// Always beginPath() before drawing, then fill() or stroke():
ctx.fillStyle = "mediumseagreen";
ctx.beginPath();
ctx.moveTo(100, 100);   // starting point
ctx.lineTo(200, 100);   // line to...
ctx.lineTo(150, 180);   // line to...
ctx.closePath();         // line back to start
ctx.fill();              // fill the shape

// Curves:
ctx.strokeStyle = "purple";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 200);
ctx.bezierCurveTo(80, 130, 160, 270, 220, 200);  // cp1x, cp1y, cp2x, cp2y, endX, endY
ctx.stroke();

Text and images

// Text:
ctx.fillStyle = "#333";
ctx.font      = "bold 24px Arial";
ctx.textAlign = "center";        // "left", "center", "right"
ctx.textBaseline = "middle";     // "top", "middle", "bottom"
ctx.fillText("Hello Canvas!", canvas.width / 2, canvas.height / 2);

// Measure text width (for layout):
const metrics = ctx.measureText("Hello Canvas!");
console.log("Text width:", metrics.width);

// Image:
const img = new Image();
img.onload = () => {
  ctx.drawImage(img, 10, 10);            // draw at (10,10)
  ctx.drawImage(img, 10, 10, 100, 80);   // draw and resize to 100x80
};

Try It Yourself

// Canvas API — 2D drawing in the browser
// Note: Try It runs in the browser — canvas works here!

const canvas = document.createElement("canvas");
canvas.width  = 400;
canvas.height = 300;
document.body.appendChild(canvas);

const ctx = canvas.getContext("2d");

// Background:
ctx.fillStyle = "#1a1a2e";
ctx.fillRect(0, 0, 400, 300);

// Filled rectangle:
ctx.fillStyle = "#e94560";
ctx.fillRect(20, 20, 100, 60);

// Stroked rectangle:
ctx.strokeStyle = "#0f3460";
ctx.lineWidth = 3;
ctx.strokeRect(140, 20, 100, 60);

// Circle (arc):
ctx.fillStyle = "#f5a623";
ctx.beginPath();
ctx.arc(300, 50, 40, 0, Math.PI * 2);  // x, y, radius, startAngle, endAngle
ctx.fill();

// Text:
ctx.fillStyle = "#ffffff";
ctx.font = "bold 20px sans-serif";
ctx.textAlign = "center";
ctx.fillText("Canvas API", 200, 130);

// Line:
ctx.strokeStyle = "#4ecca3";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 160);   // start point
ctx.lineTo(380, 160);  // end point
ctx.stroke();

// Curved path (quadraticCurveTo):
ctx.strokeStyle = "#e94560";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(20, 200);
ctx.quadraticCurveTo(200, 140, 380, 200);  // control point, end point
ctx.stroke();

// Gradient:
const grad = ctx.createLinearGradient(20, 220, 380, 280);
grad.addColorStop(0, "#e94560");
grad.addColorStop(1, "#4ecca3");
ctx.fillStyle = grad;
ctx.fillRect(20, 220, 360, 60);

ctx.fillStyle = "#fff";
ctx.font = "14px monospace";
ctx.fillText("Canvas is rendered!", 200, 255);

console.log("Canvas drawn: 400x300 pixels");

Animation, transforms, and pixel manipulation

Animation with requestAnimationFrame

// requestAnimationFrame — the right way to animate (synced to display refresh)
const canvas = document.getElementById("canvas");
const ctx    = canvas.getContext("2d");

let x  = 0;
let dx = 2;  // speed

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // clear previous frame

  // Draw ball:
  ctx.fillStyle = "#e94560";
  ctx.beginPath();
  ctx.arc(x, 100, 20, 0, Math.PI * 2);
  ctx.fill();

  // Move and bounce:
  x += dx;
  if (x > canvas.width - 20 || x < 20) dx *= -1;

  requestAnimationFrame(animate);  // schedule next frame (~60fps)
}

requestAnimationFrame(animate);

Transforms

// save() and restore() — save/restore drawing state (transforms, styles)
ctx.save();
  ctx.translate(200, 150);      // move origin to center of canvas
  ctx.rotate(Math.PI / 4);      // 45 degrees
  ctx.scale(1.5, 1.5);          // scale up 1.5x

  ctx.fillStyle = "coral";
  ctx.fillRect(-50, -25, 100, 50);   // drawn relative to new origin
ctx.restore();  // back to original state

Pixel manipulation

// getImageData — read pixel values:
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels    = imageData.data;  // Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

// Invert all colours:
for (let i = 0; i < pixels.length; i += 4) {
  pixels[i]     = 255 - pixels[i];    // R
  pixels[i + 1] = 255 - pixels[i+1]; // G
  pixels[i + 2] = 255 - pixels[i+2]; // B
  // pixels[i+3] — A (alpha, leave unchanged)
}

// Write pixels back:
ctx.putImageData(imageData, 0, 0);

// Greyscale:
for (let i = 0; i < pixels.length; i += 4) {
  const avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
  pixels[i] = pixels[i+1] = pixels[i+2] = avg;
}
ctx.putImageData(imageData, 0, 0);

OffscreenCanvas, WebGL, and canvas spec

OffscreenCanvas — canvas in a Worker

// Transfer canvas rendering to a Web Worker (no main thread involvement):
const canvas   = document.getElementById("canvas");
const offscreen = canvas.transferControlToOffscreen();

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

// In canvas-worker.js:
self.onmessage = ({ data }) => {
  const ctx = data.canvas.getContext("2d");
  // All canvas operations happen in the worker — zero main thread cost
  function animate() {
    ctx.clearRect(0, 0, data.canvas.width, data.canvas.height);
    // ... draw ...
    requestAnimationFrame(animate);  // works in workers!
  }
  animate();
};

Canvas 2D vs WebGL

// Canvas 2D (ctx = canvas.getContext("2d")):
// - Easy to use
// - Good for shapes, text, images, 2D games
// - CPU-based rendering (slower for 3D)

// WebGL (ctx = canvas.getContext("webgl2")):
// - GPU-accelerated (fast for 3D, particle systems, shaders)
// - Much more complex — vertex shaders, fragment shaders, buffers
// - Use Three.js or Babylon.js for 3D rather than raw WebGL

// WebGPU (ctx = canvas.getContext("webgpu"); the GPU adapter and device are requested asynchronously):
// - Modern GPU API, replacing WebGL
// - Compute shaders, better performance

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.