<canvas>
HTML DOM Canvas object
Canvas object
The Canvas object is new in HTML5.
The HTML5 <canvas> tag is used to draw images (via script, usually JavaScript).
Access the Canvas object
You can use getElementById() to access the <canvas> element:
var x = document.getElementById("myCanvas");
Try It!
Create a Canvas object
You can use the document.createElement() method to create a <canvas> element:
var x = document.createElement("CANVAS");
Try It!
Note: The <canvas> element itself has no drawing capability (it's just a container for graphics) - you must use a script to do the actual drawing.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This manual provides the complete getContext("2d") object's properties and methods, which can be used to draw text, lines, rectangles, circles, and more on the canvas.
Colors, styles and shades
| Attribute | Description |
|---|
| fillStyle | Sets or returns the color, gradient, or mode used to fill the painting. |
| strokeStyle | Sets or returns the color, gradient, or mode used for strokes. |
| shadowColor | Sets or returns the color used for the shadow. |
| shadowBlur | Sets or returns the blur level used 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 | Description |
|---|
| createLinearGradient() | Create a linear gradient (for use on canvas content). |
| createPattern() | Repeats the specified element in the specified direction. |
| createRadialGradient() | Create radial/circular gradients (for use on canvas content). |
| addColorStop() | Specifies the color and stop position in the gradient object. |
Line style
| Attribute | Description |
|---|
| lineCap | Sets or returns the end endpoint style of the line. |
| lineJoin | Sets or returns the type of corner that is 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 a rectangle that is "filled". |
| strokeRect() | Draws a rectangle (no padding). |
| clearRect() | Clears the specified pixels within the given rectangle. |
Path
| Method | Description |
|---|
| fill() | Fills the current drawing (path). |
| stroke() | Draw the defined path. |
| beginPath() | Start a path, or reset the current path. |
| moveTo() | Moves the path to the specified point in the canvas without creating a line. |
| closePath() | Creates a path from the current point back to the starting point. |
| lineTo() | Add a new point, and then create a line in the canvas from that point to the last specified point. |
| clip() | Cut areas of any shape and size from the original canvas. |
| quadraticCurveTo() | Create a quadratic Bézier curve. |
| bezierCurveTo() | Create a triple Bézier curve. |
| arc() | Create arcs/curves (for creating circles or partial circles). |
| arcTo() | Create an arc/curve between tangents. |
| isPointInPath() | Returns true if the specified point is in the current path, otherwise false. |
Convert
| Method | Description |
|---|
| scale() | Scales the current drawing to a larger or smaller size. |
| rotate() | Rotates the current drawing. |
| translate() | Remap the (0,0) position on the canvas. |
| transform() | Replaces the drawing's current transformation matrix. |
| setTransform() | Resets the current conversion to the identity matrix, then run transform(). |
Text
| Attribute | Description |
|---|
| font | Sets or returns the current font properties of the text content. |
| textAlign | Sets or returns the current alignment of text content. |
| textBaseline | Sets or returns the current text baseline to use when drawing text. |
| Method | Description |
|---|
| fillText() | Draws "filled" text on the canvas. |
| strokeText() | Draw text on the canvas (no padding). |
| measureText() | Returns an object that contains the specified text width. |
Image drawing
| Method | Description |
|---|
| drawImage() | Draw an image, canvas, or video onto the canvas. |
Pixel manipulation
| 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 for the specified ImageData object. |
| Method | Description |
|---|
| createImageData() | Creates a new, blank ImageData object. |
| getImageData() | Returns an ImageData object that copies pixel data for the rectangle specified on the canvas. |
| putImageData() | Places the image data (from the specified ImageData object) back on the canvas. |
Synthesis
| Attribute | Description |
|---|
| globalAlpha | Sets or returns the current alpha or transparent value of the drawing. |
| globalCompositeOperation | Sets or returns how the new image draws onto an existing image. |
Other
| Method | Attribute |
|---|
| save() | Saves the state of the current environment. |
| restore() | Returns previously saved path states and properties. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Standard Properties and Events
Canvas objects also support standard properties and events .
Related articles
HTML Tutorial: HTML <canvas> Element