HTML5 <canvas>Reference Manual

Description

The HTML5 <canvas> tag is used to draw images (via scripts, usually JavaScript).

However, the <canvas> element itself has no drawing capability (it is merely a container for graphics) - you must use scripts to perform the actual drawing task.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

This manual provides the 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 Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome and Safari support the attributes and methods of the <canvas> tag.

Note:Internet Explorer 8 and earlier IE versions do not support the <canvas> element.

Colors, Styles and Shadows

Properties Description
fillStyle Sets or returns the color, gradient, or pattern used for filling drawings.
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 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.

Methods Description
createLinearGradient() Creates a linear gradient (applied to canvas content).
createPattern() Repeats the specified element in the specified direction.
createRadialGradient() Creates a radial/circular gradient (applied to canvas content).
addColorStop() Specifies the colors and stop positions in the gradient object.

Line Styles

Properties Description
lineCap Sets or returns the style of the line's ending endpoints.
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.

Rectangles

Methods Description
rect() Creates a rectangle.
fillRect() Draws a "filled" rectangle.
strokeRect() Draws a rectangle (without fill).
clearRect() Clears the specified pixels within a given rectangle.

Paths

Methods Description
fill() Fills the current drawing (path).
stroke() Draws the defined path.
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, then creates a line in the canvas from that point to the last specified point.
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 partial circles).
arcTo() Creates an arc/curve between two tangents.
isPointInPath() Returns true if the specified point is in the current path, otherwise returns false.

Transforms

Methods Description
scale() Scales the current drawing to be larger or smaller.
rotate() Rotates the current drawing.
translate() Remaps the (0,0) position on the canvas.
transform() Replaces the current transformation matrix of the drawing.
setTransform() Resets the current transformation to the identity matrix. Then runs transform().

Text

Properties Description
font Sets or returns the current font property 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.

Methods Description
fillText() Draws "filled" text on the canvas.
strokeText() Draws text on the canvas (without fill).
measureText() Returns an object containing the width of the specified text.

Image Drawing

Methods Description
drawImage() Draws an image, canvas, or video onto the canvas.

Pixel Operations

Properties 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.

Methods Description
createImageData() Creates a new, blank ImageData object.
getImageData() Returns an ImageData object that copies pixel data from the specified rectangle on the canvas.
putImageData() Puts the image data (from the specified ImageData object) back onto the canvas.

Compositing

Properties Description
globalAlpha Sets or returns the current alpha or transparency value of the drawing.
globalCompositeOperation Sets or returns how new images are drawn onto existing images.

Other

Methods Description
save() Saves the state of the current context.
restore() Returns the previously saved path state and properties.
createEvent()  
getContext()  
toDataURL()  
Other Extensions