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.


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


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.


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 ().


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.


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.


Method Description
save() Saves the current context's state.
restore() Returns the path state and attributes that were previously saved.
createEvent()  -
getContext()  -
toDataURL()  -