HTML Free CodesInteractive 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 |