HTML Canvas Reference
The HTML <canvas> tag is used to draw graphics in real time using scripting (usually JavaScript).
Colors, Styles, and Shadows
|
Property
|
Description
|
|
fillStyle
|
The color, gradient, or pattern used to fill the drawing is set or returned.
|
|
strokeStyle
|
Sets or returns the stroke color, gradient, or pattern.
|
|
shadowColor
|
Returns or sets the color to be used for shadows.
|
|
shadowBlur
|
The blur level for shadows is set or returned.
|
|
shadowOffsetX
|
Sets or returns the horizontal distance of the shape's shadow.
|
|
shadowOffsetY
|
Sets or returns the vertical distance of the shape's shadow.
|
|
Method
|
Description
|
|
createLinearGradient()
|
This function generates a linear gradient (to use on canvas content).
|
|
createPattern()
|
Repeats a given element in the given direction.
|
|
createRadialGradient()
|
This function generates a radial/circular gradient (to use on canvas content).
|
|
addColorStop()
|
Colors and stop positions in a gradient object are specified.
|
Line Styles
|
Property
|
Description
|
|
lineCap
|
Sets or returns the style of a line's end caps.
|
|
lineJoin
|
When two lines intersect, this function sets or returns the type of corner that is formed.
|
|
lineWidth
|
Returns or sets the current line width.
|
|
miterLimit
|
The maximum miter length is set or returned.
|
Rectangle
|
Method
|
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
|
Method
|
Description
|
|
fill()
|
Completes the current drawing (path).
|
|
stroke()
|
The path you've specified is actually drawn.
|
|
beginPath()
|
Starts a new path or resets the current path.
|
|
moveTo()
|
The path is moved to the specified point on the canvas without creating a line.
|
|
closePath()
|
Make a path from the current point to the starting point.
|
|
lineTo()
|
Adds a new point to the canvas and draws a line to it from the last specified point.
|
|
clip()
|
Clips a region from the original canvas of any shape and size.
|
|
quadraticCurveTo()
|
This function generates a quadratic Bézier curve.
|
|
bezierCurveTo()
|
This function generates a cubic Bézier curve.
|
|
arc()
|
Produces an arc/curve (used to create circles, or parts of circles)
|
|
arcTo()
|
Make an arc/curve by connecting two tangents.
|
|
isPointInPath()
|
If the specified point is in the current path, it returns true; otherwise, it returns false.
|
Transformations
|
Method
|
Description
|
|
scale()
|
Scales the current drawing up or down.
|
|
rotate()
|
The current drawing is rotated.
|
|
translate()
|
The (0,0) position on the canvas is remapped.
|
|
transform()
|
Replaces the drawing's current transformation matrix.
|
|
setTransform()
|
The current transform is reset to the identity matrix. Then transform is executed ().
|
Text
|
Property
|
Description
|
|
font
|
Sets or returns the text content's current font properties.
|
|
textAlign
|
Sets or returns the text content's current alignment.
|
|
textBaseline
|
The current text baseline used when drawing text is set or returned.
|
|
Method
|
Description
|
|
fillText()
|
Text is "filled" on the canvas.
|
|
strokeText()
|
Text is drawn on the canvas (no fill).
|
|
measureText()
|
The width of the specified text is returned as an object.
|
Image Drawing
|
Method
|
Description
|
|
drawImage()
|
On the canvas, an image, canvas, or video is drawn.
|
Pixel Manipulation
|
Property
|
Description
|
|
width
|
The width of an Image Data object is returned.
|
|
height
|
The height of an Image Data object is returned.
|
|
data
|
Returns an object containing image data from a given Image Data object.
|
|
Method
|
Description
|
|
createImageData()
|
This method creates a new, empty Image Data object.
|
|
getImageData()
|
Returns an Image Data object that copies the pixel data for the specified canvas rectangle.
|
|
putImageData()
|
Returns image data from a specified Image Data object to the canvas.
|
Compositing
|
Property
|
Description
|
|
globalAlpha
|
Sets or returns the drawing's current alpha or transparency value.
|
|
globalCompositeOperation
|
Sets or returns the method for drawing a new image onto an existing image.
|
Others
|
Method
|
Description
|
|
save()
|
Saves the current context's state.
|
|
restore()
|
Returns the path state and attributes that were previously saved.
|
|
createEvent()
|
-
|
|
getContext()
|
-
|
|
toDataURL()
|
-
|