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.


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


Method Description
fill() Fills the path to the canvas.
stroke() Draws the defined path.
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() Restricts the drawing to a particular area.
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.


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.


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 an object which contains image data of a specified ImageData object.

Method Description
createImageData() Creates a newImageData 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.


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.


Method Description
save() Saves the current state of a context.
restore() Returns the path state and attributes saved previously.
createEvent() Creates an event object.
getContext() Returns a drawing context.
toDataURL() Returns a data URL.

Practice Your Knowledge

What can the method getContext('2d') do in HTML5 Canvas?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?