The HTML <canvas> element is used to draw graphics, on the fly, via scripting (JavaScript).
Style, Colors, Shadows:
| fillStyle | defines the color, gradient, or pattern used to fill the drawing. |
| strokeStyle | defines the color, gradient, or pattern used for strokes. |
| shadowColor | sets or returns the color to use for shadows. |
| shadowBlur | sets or returns the blur level for shadows. |
| shadowOffsetX | sets or returns the horizontal distance of the shadow from the shape. |
| shadowOffsetY | sets or returns the vertical distance of the shadow from the shape. |
Method:
| createLinearGradient() | creates a linear gradient. |
| createRadialGradient() | creates a radial gradient. |
| addColorStop() | defines the colors and position in a gradient object. |
| createPattern() | defines the specified element in the specified direction. |
Line Styles:
| lineCap | sets or returns the style of the end caps for a line. |
| lineJoin | sets or returns the type of corner created, when two lines meet. |
| lineWidth | sets or returns the current line width (px). |
| miterLimit | sets or returns the maximum miter length. |
Rectangles:
| rect() | draws a rectangle. |
| fillRect() | creates a “filled” rectangle. |
| strokeRect() | creates a rectangle (no fill). |
| clearRect() | clears the defined pixels within a given rectangle. |
Paths:
Method:
| fill() | fills the current path. |
| stroke() | draws the path. |
| beginPath() | begins a path. |
| moveTo() | moves the path to the specified point in the canvas. |
| closePath() | draws a path from the current point back to the starting point. |
| lineTo() | adds a new point and creates a line to that point from the last specified point in the canvas. |
| clip() | clips any shape and size from the original canvas. |
| quadraticCurveTo() | draws a quadratic Bézier curve. |
| bezierCurveTo() | draws a cubic Bézier curve. |
| arc() | creates an arc/curve/circle. |
| arcTo() | creates an arc/curve between two tangents. |
| isPointInPath() | returns true if the specified point is in the current path, otherwise false. |
Transformations:
| scale() | scales the current drawing (smaller/bigger). |
| rotate() | rotates the current drawing. |
| translate() | remaps the (0,0) position on the canvas. |
| transform() | scale, rotate, move, and skew the current context. |
| setTransform() | resets the current transform to the identity matrix, and then runs transform(). |
Text:
| font | sets the current font properties for text content on the canvas. |
| textAlign | sets the current alignment for text content. |
| textBaseline | sets or returns the current text baseline used when drawing text. |
Method:
| fillText() | draws filled text on the canvas. |
| strokeText() | draws text (no fill) on the canvas. |
| measureText() | returns an object that contains the width of the specified text. |
Image Drawing:
| drawImage() | creates an image, canvas, or video onto the canvas. |
Composing:
| globalAlpha | sets the current alpha or transparency value of the drawing. |
| globalCompositeOperation | sets how a source (new) image is drawn into a destination (existing) image. |
