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 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 versions of IE do not support the <canvas> element.


Colors, Styles and Shadows

AttributeDescription
fillStyleSets or returns the color, gradient, or pattern used to fill the painting.
strokeStyleSet or return the color, gradient, or pattern used for the stroke.
shadowColorSets or returns the color used for shadows.
shadowBlurSets or returns the blur level used for shadows.
shadowOffsetXSets or returns the horizontal distance between the shadow and the shape.
shadowOffsetYSets or returns the vertical distance between the shadow and the shape.


MethodDescription
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

AttributeDescription
lineCapSets or returns the style of end of the line.
lineJoinSets or returns the type of corner created when two lines intersect.
lineWidthSets or returns the current line width.
miterLimitSets or returns the maximum miter length.

Rectangle

MethodDescription
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

MethodDescription
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

MethodDescription
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

AttributeDescription
fontSets or returns the current font attributes of the text content.
textAlignSets or returns the current alignment of the text content.
textBaselineSets or returns the current text baseline used when drawing text.


MethodDescription
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

MethodDescription
drawImage()Draw an image, canvas or video on the canvas.

Pixel Operation

AttributeDescription
widthReturns the width of the ImageData object.
heightReturns the height of the ImageData object.
dataReturns an object that contains the image data of the specified ImageData object.


MethodDescription
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

AttributeDescription
globalAlphaSets or returns the current alpha or transparency value of the drawing.
globalCompositeOperationSet or return how the new image is drawn on the existing image.

Others

MethodDescription
save()Save the current state of the environment.
restore()Return the previously saved path state and attributes.
createEvent()
getContext()
toDataURL()