Canvas 2D Context: The API for Drawing on the Web

Why it exists

HTML and CSS are for laying out documents, not for pixel-level drawing. When you need dynamic, script-driven graphics for things like charts, games, or image editors, you need a different tool. The <canvas> element provides a bitmap drawing surface, and the 2D Context is the API to actually put pixels on it.

The mental model

The Canvas 2D Context object, conventionally named ctx, is your toolkit for drawing. It's not a direct pixel manipulator; it's a state machine that receives commands. Think of it as a robotic arm with a paintbrush. You command it: "pick up the red paint" (ctx.fillStyle = 'red'), then "paint a rectangle at these coordinates" (ctx.fillRect(...)). The arm remembers it's holding the red paint until you command it to pick up a different color.

How it works

First, you grab a <canvas> element from the DOM. You then call canvas.getContext('2d') on it to get the rendering context object. All subsequent drawing operations are methods called on this context object. The typical workflow is to set the state for your drawing operation (like color, line width, or font), and then call a drawing method (like fillRect, strokeText, or arc). For complex shapes, you define a path using beginPath(), moveTo(), and lineTo() before finally rendering it with stroke() or fill().

When to use it

Use the Canvas 2D Context for dynamic 2D graphics where performance matters. This includes real-time data visualizations, simple browser games, in-browser image editors for tasks like cropping, or generating custom images on the fly. It's a powerful tool for anything that requires programmatic drawing.

When not to use it

Avoid using canvas for static content or general page layout; HTML and CSS are more accessible, responsive, and easier to maintain for those tasks. For complex, interactive vector graphics that need to scale cleanly (like an interactive map), SVG is often a better choice. For 3D graphics, you would use the WebGL or WebGPU context (getContext('webgl')).

One canonical example

To get the context and draw a simple rectangle, you first need an HTML canvas element like <canvas id="myCanvas" width="200" height="100"></canvas>. Then, in your script:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 80);

This code gets the 2D context, sets the fill color state to blue, and then draws a filled rectangle on the canvas.