HTML Graphics
HTML Canvas Complete Reference
The CanvasRenderingContext2D object returned by getContext('2d') is the complete drawing API for HTML canvas. It offers methods for rectangles, paths, curves, text and images, plus properties that set colours, line styles, fonts and transforms. This reference groups the most-used methods and properties with a short description of each, so you can look up exactly what to call while drawing.
Rectangle Methods
| Method / Property | Description |
|---|---|
| fillRect(x, y, w, h) | Draws a filled rectangle using the current fillStyle. |
| strokeRect(x, y, w, h) | Draws a rectangle outline using the current strokeStyle and lineWidth. |
| clearRect(x, y, w, h) | Erases the given rectangle back to fully transparent pixels. |
Path Methods
| Method | Description |
|---|---|
| beginPath() | Starts a new path, discarding any previous sub-paths. |
| closePath() | Draws a straight line back to the start of the current sub-path, closing it. |
| moveTo(x, y) | Moves the pen to (x, y) without drawing, starting a new sub-path. |
| lineTo(x, y) | Adds a straight line from the current point to (x, y). |
| arc(x, y, r, start, end, ccw?) | Adds a circular arc centred at (x, y); use 0 to 2*PI for a full circle. |
| arcTo(x1, y1, x2, y2, r) | Adds an arc between two tangents, useful 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. |
| ellipse(x, y, rx, ry, rot, start, end) | Adds an elliptical arc to the path. |
| fill() | Fills the current path with the current fillStyle. |
| stroke() | Strokes (outlines) the current path with the current strokeStyle. |
| clip() | Uses the current path as a clipping region for subsequent drawing. |
| isPointInPath(x, y) | Returns true if the point is inside the current path (for hit testing). |
Colour, Line & Shadow Properties
| Property | Description |
|---|---|
| fillStyle | The colour, gradient or pattern used by fill()/fillRect()/fillText(). |
| strokeStyle | The colour, gradient or pattern used by stroke()/strokeRect()/strokeText(). |
| lineWidth | The thickness of stroked lines, in pixels. |
| lineCap | Style of open line ends: 'butt', 'round' or 'square'. |
| lineJoin | Style of line corners: 'miter', 'round' or 'bevel'. |
| miterLimit | Maximum miter length before a sharp corner is bevelled. |
| setLineDash(segments) | Sets a dash pattern (array of dash/gap lengths) for stroked lines. |
| lineDashOffset | Offset where the dash pattern begins; animate it for a marching-ants effect. |
| globalAlpha | Global transparency (0 to 1) applied to everything drawn. |
| globalCompositeOperation | How new drawing blends with existing pixels (e.g. 'source-over', 'multiply'). |
| shadowColor | The colour of the drop shadow. |
| shadowBlur | The blur radius of the drop shadow. |
| shadowOffsetX / shadowOffsetY | Horizontal / vertical offset of the shadow. |
Text Methods & Properties
| Method / Property | Description |
|---|---|
| fillText(text, x, y) | Draws filled text at (x, y) using fillStyle. |
| strokeText(text, x, y) | Draws outlined text at (x, y) using strokeStyle. |
| measureText(text) | Returns a TextMetrics object with the width (and more) of the text. |
| font | The CSS font shorthand for text, e.g. '20px sans-serif'. |
| textAlign | Horizontal alignment: 'start', 'end', 'left', 'right' or 'center'. |
| textBaseline | Vertical alignment: 'top', 'middle', 'alphabetic', 'bottom', etc. |
Image, Gradient & Pattern Methods
| Method | Description |
|---|---|
| drawImage(img, x, y) | Draws an image, video frame or another canvas; overloads allow scaling and clipping regions. |
| createLinearGradient(x0, y0, x1, y1) | Creates a linear gradient object to assign to fillStyle/strokeStyle. |
| createRadialGradient(...) | Creates a radial gradient object between two circles. |
| createPattern(image, repeat) | Creates a repeating pattern from an image to use as a paint style. |
| getImageData(x, y, w, h) | Reads raw pixel data from a region for per-pixel manipulation. |
| putImageData(data, x, y) | Writes raw pixel data back onto the canvas. |
State & Transform Methods
| Method | Description |
|---|---|
| save() | Pushes the current state (styles, transforms, clip) onto a stack. |
| restore() | Pops the last saved state, undoing style and transform changes since save(). |
| translate(x, y) | Moves the coordinate origin by (x, y). |
| rotate(angle) | Rotates the coordinate system by angle radians around the current origin. |
| scale(x, y) | Scales the coordinate system horizontally and vertically. |
| transform(a, b, c, d, e, f) | Multiplies the current transform by a custom matrix. |
| setTransform(a, b, c, d, e, f) | Resets and sets the transform matrix directly (e.g. setTransform(1,0,0,1,0,0) to reset). |
| resetTransform() | Resets the current transform to the identity matrix. |
💡
Wrap transform-heavy drawing in save() and restore() so translate/rotate/scale on one object never leak into the next.