HTML5 Canvas Reference
HTML5 <canvas> Reference
Description
The HTML5 <canvas> tag is used to draw images (via script, usually JavaScript).
However, the <canvas> element itself does not have the ability to draw (it is just a container for graphics) - you must use scripts to complete the actual drawing tasks.
The getContext() method can return an object that provides methods and properties for drawing on the canvas.
This manual provides a complete set of properties and methods of the getContext("2d") object, which can be used to draw text, lines, rectangles, circles, etc. on the canvas.
Browsers Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support the attributes and methods of the <canvas> tag.
Note: Internet Explorer 8 and earlier versions of IE do not support the <canvas> element.
Colors, Styles and Shadows
| Attribute | Description |
|---|
| fillStyle | Sets or returns the color, gradient, or pattern used to fill the painting. |
| strokeStyle | Set or return the color, gradient, or pattern used for the stroke. |
| shadowColor | Sets or returns the color used for shadows. |
| shadowBlur | Sets or returns the blur level used for shadows. |
| shadowOffsetX | Sets or returns the horizontal distance between the shadow and the shape. |
| shadowOffsetY | Sets or returns the vertical distance between the shadow and the shape. |
| Method | Description |
|---|
| createLinearGradient() | Create a linear gradient (used on the canvas content). |
| createPattern() | Repeat the specified element in the specified direction. |
| createRadialGradient() | Create radial/circular gradients (used on canvas content). |
| addColorStop() | Specify the color and stop position in the gradient object. |
Line Style
| Attribute | Description |
|---|
| lineCap | Sets or returns the style of end of the line. |
| lineJoin | Sets or returns the type of corner created when two lines intersect. |
| lineWidth | Sets or returns the current line width. |
| miterLimit | Sets or returns the maximum miter length. |
Rectangle
| Method | Description |
|---|
| rect() | Create a rectangle. |
| fillRect() | Draw the "filled" rectangle. |
| strokeRect() | Draw a rectangle (no fill). |
| clearRect() | Clear the specified pixels within the given rectangle. |
Path
| Method | Description |
|---|
| fill() | Fill the current drawing (path). |
| stroke() | Draw the defined path. |
| beginPath() | Start a path, or reset the current path. |
| moveTo() | Move the path to the specified point in the canvas without creating a line. |
| closePath() | Create a path from the current point back to the starting point. |
| lineTo() | Add a new point, and then create a line from that point to the last specified point in the canvas. |
| clip() | Cut an area of any shape and size from the original canvas. |
| quadraticCurveTo() | Create a quadratic Bézier curve. |
| bezierCurveTo() | Create a cubic Bézier curve. |
| arc() | Create arcs/curves (used to create circles or partial circles). |
| arcTo() | Create an arc/curve between two tangents. |
| isPointInPath() | If the specified point is in the current path, it returns true, otherwise it returns false. |
Conversion
| Method | Description |
|---|
| scale() | Scale the current drawing to be larger or smaller. |
| rotate() | Rotate the current drawing. |
| translate() | Remap the (0,0) position on the canvas. |
| transform() | Replace the current transformation matrix of the drawing. |
| setTransform() | Reset the current transformation to the identity matrix. Then run transform(). |
Text
| Attribute | Description |
|---|
| font | Sets or returns the current font attributes of the text content. |
| textAlign | Sets or returns the current alignment of the text content. |
| textBaseline | Sets or returns the current text baseline used when drawing text. |
| Method | Description |
|---|
| fillText() | Draw "filled" text on the canvas. |
| strokeText() | Draw text on the canvas (no fill). |
| measureText() | Returns an object containing the specified text width. |
Image Drawing
| Method | Description |
|---|
| drawImage() | Draw an image, canvas or video on the canvas. |
Pixel Operation
| Attribute | Description |
|---|
| width | Returns the width of the ImageData object. |
| height | Returns the height of the ImageData object. |
| data | Returns an object that contains the image data of the specified ImageData object. |
| Method | Description |
|---|
| createImageData() | Create a new, blank ImageData object. |
| getImageData() | Returns the ImageData object, which copies pixel data for the specified rectangle on the canvas. |
| putImageData() | Put the image data (from the specified ImageData object) back on the canvas. |
Synthesis
| Attribute | Description |
|---|
| globalAlpha | Sets or returns the current alpha or transparency value of the drawing. |
| globalCompositeOperation | Set or return how the new image is drawn on the existing image. |
Others
| Method | Description |
|---|
| save() | Save the current state of the environment. |
| restore() | Return the previously saved path state and attributes. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|