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 |