HTML Graphics
HTML Canvas Complete Reference
The Canvas 2D context (CanvasRenderingContext2D) exposes dozens of methods and properties for drawing shapes, paths, text and images, and for transforming the coordinate system. This reference gathers the ones you will use most into a single lookup table, with a runnable example that combines paths, arcs, gradients, text and a transform. Bookmark it as your Canvas cheat sheet.
Runnable Example
This scene uses a linear gradient background, a stroked path, filled arcs, a save/translate/rotate/restore transform, and text - a compact tour of the Canvas 2D API. Run it, then look up any unfamiliar call in the table below.
Example
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Canvas Reference Demo</title></head>
<body style="background:#0f172a;display:grid;place-items:center;min-height:100vh;margin:0;">
<canvas id="c" width="380" height="240" style="border-radius:10px;"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
// gradient background
const bg = ctx.createLinearGradient(0, 0, 0, 240);
bg.addColorStop(0, '#1e293b');
bg.addColorStop(1, '#0f172a');
ctx.fillStyle = bg;
ctx.fillRect(0, 0, 380, 240);
// stroked path (a hill)
ctx.beginPath();
ctx.moveTo(0, 200);
ctx.quadraticCurveTo(190, 90, 380, 200);
ctx.lineWidth = 4;
ctx.strokeStyle = '#22c55e';
ctx.stroke();
// filled sun
ctx.beginPath();
ctx.arc(300, 70, 34, 0, Math.PI * 2);
ctx.fillStyle = '#facc15';
ctx.fill();
// rotated square using save / translate / rotate / restore
ctx.save();
ctx.translate(80, 90);
ctx.rotate(Math.PI / 5);
ctx.fillStyle = '#ec4899';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();
// text
ctx.fillStyle = '#f8fafc';
ctx.font = 'bold 22px Arial';
ctx.textAlign = 'center';
ctx.fillText('Canvas 2D API', 190, 225);
</script>
</body>
</html>💡
Wrap coordinate changes in ctx.save() before and ctx.restore() after. This keeps translate/rotate/scale from leaking into later drawing calls.
Canvas 2D Method & Property Reference
The table groups the essentials: rectangles, path building, path drawing, styles, text, transforms, image and pixel operations, and state management.
| Method / Property | Description |
|---|---|
| getContext('2d') | Returns the 2D drawing context for a <canvas> element. |
| fillRect(x, y, w, h) | Draws a filled rectangle using the current fillStyle. |
| strokeRect(x, y, w, h) | Draws only the outline of a rectangle using strokeStyle. |
| clearRect(x, y, w, h) | Erases the given rectangle back to transparent. |
| beginPath() | Starts a new path, discarding any previous sub-paths. |
| closePath() | Draws a line from the current point back to the path's start. |
| moveTo(x, y) | Lifts the pen and moves to (x, y) without drawing. |
| lineTo(x, y) | Adds a straight line from the current point to (x, y). |
| arc(x, y, r, start, end) | Adds a circular arc/circle; angles are in radians. |
| arcTo(x1, y1, x2, y2, r) | Adds an arc between two tangents - handy for rounded corners. |
| quadraticCurveTo(cpx, cpy, x, y) | Adds a quadratic Bezier curve with one control point. |
| bezierCurveTo(c1x, c1y, c2x, c2y, x, y) | Adds a cubic Bezier curve with two control points. |
| rect(x, y, w, h) | Adds a rectangle sub-path to the current path. |
| fill() | Fills the current path with fillStyle. |
| stroke() | Strokes (outlines) the current path with strokeStyle. |
| clip() | Uses the current path as a mask so later drawing is confined to it. |
| isPointInPath(x, y) | Tests whether a point lies inside the current path (hit testing). |
| fillStyle | Colour, gradient or pattern used by fill operations. |
| strokeStyle | Colour, gradient or pattern used by stroke operations. |
| lineWidth | Thickness of stroked lines in pixels. |
| lineCap | End-cap style of open lines: 'butt', 'round' or 'square'. |
| lineJoin | Corner style where segments meet: 'miter', 'round' or 'bevel'. |
| setLineDash([...]) | Sets a dash pattern for strokes, e.g. [10, 6]. |
| globalAlpha | Overall opacity (0 to 1) applied to everything drawn. |
| globalCompositeOperation | How new drawing blends with existing pixels (e.g. 'multiply'). |
| shadowColor / shadowBlur | Colour and blur radius of a drop shadow on shapes and text. |
| font | CSS-style font string for text, e.g. 'bold 20px Arial'. |
| textAlign | Horizontal text alignment: 'left', 'center', 'right', 'start', 'end'. |
| textBaseline | Vertical text alignment: 'top', 'middle', 'alphabetic', 'bottom'. |
| fillText(text, x, y) | Draws filled text at (x, y). |
| strokeText(text, x, y) | Draws outlined text at (x, y). |
| measureText(text) | Returns metrics (like width) for a string in the current font. |
| createLinearGradient(x0,y0,x1,y1) | Creates a linear gradient object for fillStyle/strokeStyle. |
| createRadialGradient(...) | Creates a radial (circular) gradient object. |
| createPattern(image, repeat) | Creates a repeating image pattern for fills. |
| addColorStop(offset, color) | Adds a colour stop (0 to 1) to a gradient object. |
| drawImage(img, x, y[, w, h]) | Draws an image, video frame or canvas onto the canvas. |
| getImageData(x, y, w, h) | Reads raw pixel data (RGBA) from a region. |
| putImageData(data, x, y) | Writes raw pixel data back onto the canvas. |
| translate(x, y) | Moves the coordinate origin by (x, y). |
| rotate(angle) | Rotates the coordinate system by angle radians. |
| scale(sx, sy) | Scales the coordinate system horizontally and vertically. |
| transform(...) / setTransform(...) | Multiplies (or replaces) the current transformation matrix. |
| save() | Pushes the current styles and transform onto a state stack. |
| restore() | Pops the last saved state, undoing style and transform changes. |
⚠️
getContext('2d') returns null if the element is not a <canvas> or the browser cannot create a context - always draw only after confirming you have a real context object.