HTML DOM CanvasObject

Canvas Object

The Canvas object is new in HTML5.

The HTML5 <canvas> tag is used to draw images (via scripts, 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 does not have drawing capabilities (it is only a container for graphics) - you must use scripts to perform the actual drawing tasks.

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, etc. on the canvas.

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 from the shadow to the shape.
shadowOffsetY Sets or returns the vertical distance from the shadow to the shape.

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

Line Styles

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

Methods Description
rect() Creates a rectangle.
fillRect() Draws a "filled" rectangle.
strokeRect() Draws a rectangle (no 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 a 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 Bezier curve.
bezierCurveTo() Creates a cubic Bezier 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 false.

Transformations

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 for the drawing.
setTransform() Resets the current transformation to the identity matrix. Then runs transform().

Text

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

Methods Description
fillText() Draws "filled" text on the canvas.
strokeText() Draws text on the canvas (no 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 an ImageData object.
height Returns the height of an 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 a specified ImageData object) back onto the canvas.

Compositing

Properties Description
globalAlpha Sets or returns the current alpha or transparency value for drawing.
globalCompositeOperation Sets or returns how a new image will be drawn onto an existing image.

Other

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

Standard Properties and Events

The Canvas object also supports standardPropertiesandEvents。

Related Articles

HTML Tutorial:HTML <canvas> Element

Other Extensions