HTML Canvas Reference Manual

HTML Canvas Reference Manual

HTML <canvas> tag is used to dynamically draw graphics through scripts (usually JavaScript).

For more information about <canvas>, please read our HTML Canvas tutorial.

Color, style, and shadow

Properties Description
fillStyle Set or return the color, gradient, or pattern used for the fill
strokeStyle Set or return the color, gradient, or pattern used for the stroke
shadowColor Set or return the color used for the shadow
shadowBlur Set or return the blur level used for the shadow
shadowOffsetX Set or return the horizontal distance of the shadow from the shape
shadowOffsetY Set or return the vertical distance of the shadow from the shape
Method Description
createLinearGradient() Create a linear gradient (used on canvas content)
createPattern() Repeat the specified element in the specified direction
createRadialGradient() Create a radial/gradient shape (used on canvas content)
addColorStop() Specify the color and stop position in the gradient object

Line style

Properties Description
lineCap Set or return the style of the line's endpoint
lineJoin Set or return the type of corner created when two lines intersect
lineWidth Set or return the current line width
miterLimit Set or return the maximum miter length

Rectangle

Method Description
rect() Create a rectangle
fillRect() Draw a 'filled' rectangle
strokeRect() Draw a rectangle (without fill)
clearRect() Clear the specified pixels within the given rectangle

Path

Method Description
fill() Fill the current drawing (path)
stroke() Draw the defined path
beginPath() Start a new path or reset the current path
moveTo() Move the path to a specified point on the canvas without creating a line
closePath() Create a path that goes back to the starting point from the current point
lineTo() Add a new point and create a line from this point to the last specified point on the canvas
clip() Clip any shape and size area 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 parts of circles)
arcTo() Creates an arc/curve between two tangents
isPointInPath() Returns true if the specified point is in the current path, otherwise returns false

Transformation

Method Description
scale() Scales the current drawing to larger or smaller
rotate() Rotates the current drawing
translate() Remaps the (0,0) position on the canvas
transform() Replaces the current transformation matrix for drawing
setTransform() Resets the current transformation to the unit matrix. Then run transform()

Text

Properties Description
font Sets or returns the current font properties of the text content
textAlign Sets or returns the current alignment of the text content
textBaseline Sets or returns the current text baseline used for drawing text
Method Description
fillText() Draws 'filled' text on the canvas
strokeText() Draws text on the canvas without filling
measureText() Returns an object containing the width of the specified text

Image Drawing

Method 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
Method Description
createImageData() Creates a new, blank ImageData object
getImageData() Returns an ImageData object that contains the pixel data for the specified rectangle on the canvas
putImageData() Places the image data (from the specified ImageData object) back onto the canvas

Composition

Properties Description
globalAlpha Sets or returns the current alpha or transparency value for drawing
globalCompositeOperation Sets or returns how the new image is drawn onto the existing image

Other

Method Description
save() Saves the current environment state
restore() Returns the previously saved path state and properties
createEvent() 　
getContext() 　
toDataURL()