Canvas Reference

The HTML5 <canvas> element is used for drawing graphics via scripting (commonly JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics.

The getContext() method returns an object which presents properties and methods for drawing on the canvas.

Colors, Styles, and Shadows

Property	Description
fillStyle	Sets or returns the color, gradient, or pattern used to fill the shapes.
strokeStyle	Sets or returns the color, gradient, or pattern used for the lines around the shapes.
shadowColor	Sets or returns the color of the shadows.
shadowBlur	Sets or returns the blur level of the shadows.
shadowOffsetX	Sets or returns the x offset of the shadow.
shadowOffsetY	Sets or returns the y offset of the shadow.

Method	Description
createLinearGradient()	Creates a linear gradient for using on the canvas content.
createPattern()	Repeats a particular element in the specified direction.
createRadialGradient()	Creates a circular/radial gradient for using on the canvas content.
addColorStop()	Defines colors and stop positions in the gradient object.

Line Styles

Property	Description
lineCap	Sets or returns the style of the line’s end caps.
lineJoin	Sets or returns the type of drawn corners.
lineWidth	Sets or returns the width of the current line.
miterLimit	Sets or returns the maximum miter length.
lineDash	Sets or returns an array of numbers specifying line dash patterns.
lineDashOffset	Sets or returns the offset for line dash patterns.

Rectangles

Method	Description
rect()	Creates rectangles.
fillRect()	Draws filled rectangles.
strokeRect()	Draws rectangular outlines.
clearRect()	Clears the specified pixels within a particular rectangle.

Paths

Method	Description
fill()	Fills the current sub-path(s) with the current fillStyle.
stroke()	Strokes the current sub-path(s) with the current strokeStyle.
beginPath()	Begins a new path or resets the current path.
moveTo()	Moves the path to the defined point in the canvas without drawing a line.
closePath()	Adds a path from the current point back to the start point.
lineTo()	Adds a line to the current sub-path.
clip()	Creates a clipping region from the current path.
quadraticCurveTo()	Adds a quadratic Bézier curve.
bezierCurveTo()	Adds a cubic Bézier curve.
arc()	Adds an arc/curve for creating circles or parts of circles.
arcTo()	Adds an arc/curve between two tangents.
isPointInPath()	Defines whether the specified point is in the current path, or not.

Transformations

Method	Description
scale()	Scales up or scales down the current drawing.
rotate()	Rotates the current drawing.
translate()	Adjusts the coordinate system of the canvas.
transform()	Applies transformation matrix to the canvas.
setTransform()	Is similar to transform(). Can be used to skew, scale, and translate the canvas.

Text

Property	Description
font	Sets the appearance of a text drawn on the canvas.
textAlign	Sets the alignment of a text drawn on the canvas.
textBaseline	Sets the vertical alignment of a text drawn on the canvas.

Method	Description
fillText()	Adds text to the canvas.
strokeText()	Adds outlined text to the canvas.
measureText()	Measures the text width.

Image Drawing

Method	Description
drawImage()	Draws an image, video, or canvas onto the canvas.

Pixel Manipulation

Property	Description
width	Returns an ImageData object’s width.
height	Returns an ImageData object’s height.
data	Returns a Uint8ClampedArray containing the pixel data.

Method	Description
createImageData()	Creates a new ImageData object.
getImageData()	Returns an ImageData object which copies the pixel data for the specified rectangle.
putImageData()	Puts the image data onto the canvas from the ImageData object.

Compositing

Property	Description
globalAlpha	Sets or returns the current alpha/transparency value.
globalCompositeOperation	Sets or returns the type of compositing operation when a new image is drawn.

Other

Method	Description
save()	Saves the current state of a context.
restore()	Returns the path state and attributes saved previously.

Note: getContext() and toDataURL() are methods of the <canvas> element itself, not the drawing context.

Practice