HTML5 <canvas>
Reference Manual
Description
The HTML5 <canvas>
tag is used to draw images (via scripting, typically JavaScript).
However, the <canvas>
element itself does not have drawing capabilities (it is just a container for graphics) - you must use a script to actually draw the graphics.
The getContext()
method returns an object that provides methods and properties for drawing on the canvas.
This manual provides complete properties and methods of the getContext("2d")
object, which can be used to draw text, lines, rectangles, circles, and more on the canvas.
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the properties 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
Property |
Description |
fillStyle |
Sets or returns the color, gradient, or pattern used to fill the drawing. |
strokeStyle |
Sets or returns the color, gradient, or pattern used for strokes. |
shadowColor |
Sets or returns the color used 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. |
Line Styles
Property |
Description |
lineCap |
Sets or returns the style of the end points of lines. |
lineJoin |
Sets or returns the type of corner created when two lines meet. |
lineWidth |
Sets or returns the current line width. |
miterLimit |
Sets or returns the maximum miter length. |
Rectangles
Paths
Method |
Description |
fill() |
Fills the current drawing (path). |
stroke() |
Draws the path defined. |
beginPath() |
Starts a path, or resets 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() |
Adds a new point and creates a line from that point to the last specified point in the canvas. |
clip() |
Clips a region of any shape and size from the original canvas. |
quadraticCurveTo() |
Creates a quadratic Bézier curve. |
bezierCurveTo() |
Creates a cubic Bézier curve. |
arc() |
Creates an arc/curve (used to create circles or parts of circles). |
arcTo() |
Creates an arc/curve between two tangents. |
isPointInPath() |
Returns true if the specified point is in the current path, otherwise false. |
Transformation
Method |
Description |
scale() |
Scales the current drawing to be larger or smaller. |
rotate() |
Rotates the current drawing. |
translate() |
Resets the (0,0) position on the canvas. |
transform() |
Replaces the current transformation matrix of the drawing. |
setTransform() |
Resets the current transform to the identity matrix. Then runs transform(). |
Text
Property |
Description |
font |
Sets or returns the current font properties for text content. |
textAlign |
Sets or returns the current alignment for text content. |
textBaseline |
Sets or returns the current text baseline used when drawing text. |
Method |
Description |
fillText() |
Draws "filled" text on the canvas. |
strokeText() |
Draws text on the canvas (no fill). |
measureText() |
Returns an object that contains the width of the specified text. |
Drawing Images
Method |
Description |
drawImage() |
Draws images, canvases, or videos onto the canvas. |
Pixel Manipulation
Property |
Description |
width |
Returns the width of the ImageData object. |
height |
Returns the height of the ImageData object. |
data |
Returns an object that contains image data of the specified ImageData object. |
Method |
Description |
createImageData() |
Creates a new, blank ImageData object. |
getImageData() |
Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas. |
putImageData() |
Puts the image data (from the specified ImageData object) back onto the canvas. |
Compositing
Property |
Description |
globalAlpha |
Sets or returns the current alpha or transparency value of the drawing. |
globalCompositeOperation |
Sets or returns how new images are drawn onto an existing image. |
Miscellaneous
Method |
Description |
save() |
Saves the current environment state. |
restore() |
Returns the previously saved path state and attributes. |
createEvent() |
|
getContext() |
|
toDataURL() |
|