Quick Answer
What is HTML Canvas?
HTML Canvas is a powerful API for drawing 2D graphics using JavaScript. It provides methods for drawing shapes (rect(), arc()), paths (moveTo(), lineTo()), text (fillText()), and images (drawImage()). Canvas is perfect for creating games, data visualizations, animations, and interactive graphics.
Interactive Canvas Demo
Drawing Methods
| Method | Description |
|---|---|
| fillRect(x, y, w, h) | Draws a filled rectangle |
| strokeRect(x, y, w, h) | Draws a rectangular outline |
| clearRect(x, y, w, h) | Clears the specified rectangular area |
| fill() | Fills the current path |
| stroke() | Draws the current path |
| beginPath() | Begins a new path |
| closePath() | Closes the current path |
| moveTo(x, y) | Moves the path to the specified point |
| lineTo(x, y) | Adds a line to the path |
| arc(x, y, r, sAngle, eAngle) | Creates an arc/curve |
| arcTo(x1, y1, x2, y2, r) | Creates an arc between two tangents |
| quadraticCurveTo(cpx, cpy, x, y) | Creates a quadratic Bézier curve |
| bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) | Creates a cubic Bézier curve |
Text Methods
| Method/Property | Description |
|---|---|
| fillText(text, x, y) | Draws filled text |
| strokeText(text, x, y) | Draws text with outline |
| measureText(text) | Returns an object containing the width of the specified text |
| font | Sets or returns the current font properties |
| textAlign | Sets or returns text alignment (start, end, center, left, right) |
| textBaseline | Sets or returns text baseline (top, hanging, middle, alphabetic, ideographic, bottom) |
Image Methods
| Method | Description |
|---|---|
| drawImage(img, x, y) | Draws an image on the canvas |
| drawImage(img, x, y, w, h) | Draws an image with specified width and height |
| createImageData(w, h) | Creates a new, blank ImageData object |
| getImageData(x, y, w, h) | Returns an ImageData object that copies pixel data |
| putImageData(imgData, x, y) | Puts the image data back onto the canvas |
Style Properties
| Property | Description |
|---|---|
| fillStyle | Sets or returns the color, gradient, or pattern used to fill |
| strokeStyle | Sets or returns the color, gradient, or pattern for strokes |
| shadowColor | Sets or returns the color for shadows |
| shadowBlur | Sets or returns the blur level for shadows |
| shadowOffsetX | Sets or returns the horizontal distance of shadow from shape |
| shadowOffsetY | Sets or returns the vertical distance of shadow from shape |
| lineWidth | Sets or returns the current line width |
| lineCap | Sets or returns the line cap style (butt, round, square) |
| lineJoin | Sets or returns the line join style (bevel, round, miter) |
| globalAlpha | Sets or returns the current global alpha (transparency) value |
| globalCompositeOperation | Sets or returns how new images are drawn onto existing images |
Transformation Methods
| Method | Description |
|---|---|
| scale(x, y) | Scales the current drawing |
| rotate(angle) | Rotates the current drawing |
| translate(x, y) | Remaps the (0,0) position on the canvas |
| transform(a, b, c, d, e, f) | Replaces the current transformation matrix |
| setTransform(a, b, c, d, e, f) | Resets and creates a new transformation matrix |