<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

AttributeDescription
fillStyleSets or returns the color, gradient, or mode used to fill the painting.
strokeStyleSets or returns the color, gradient, or mode used for strokes.
shadowColorSets or returns the color used for the shadow.
shadowBlurSets or returns the blur level used for shadows.
shadowOffsetXSets or returns the horizontal distance of the shadow from the shape.
shadowOffsetYSets or returns the vertical distance of the shadow from the shape.


MethodDescription
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

AttributeDescription
lineCapSets or returns the end endpoint style of the line.
lineJoinSets or returns the type of corner that is 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 a rectangle that is "filled".
strokeRect()Draws a rectangle (no padding).
clearRect()Clears the specified pixels within the given rectangle.

Path

MethodDescription
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

MethodDescription
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

AttributeDescription
fontSets or returns the current font properties of the text content.
textAlignSets or returns the current alignment of text content.
textBaselineSets or returns the current text baseline to use when drawing text.


MethodDescription
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

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

Pixel manipulation

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


MethodDescription
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

AttributeDescription
globalAlphaSets or returns the current alpha or transparent value of the drawing.
globalCompositeOperationSets or returns how the new image draws onto an existing image.

Other

MethodAttribute
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