HTML Canvas Reference

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

The getContext() Method

The getContext() method returns an object that provides methods and properties for drawing on the canvas. The most common context is "2d", which allows for drawing 2D text, lines, boxes, circles, and more.

Common Canvas Methods

Method	Description
`fillRect()`	Draws a "filled" rectangle
`strokeRect()`	Draws a rectangle (no fill)
`clearRect()`	Clears the specified pixels within a given rectangle
`beginPath()`	Begins a path, or resets the current path
`moveTo()`	Moves the path to the specified point in the canvas, without creating a line
`lineTo()`	Adds a new point and creates a line to that point from the last specified point in the canvas
`stroke()`	Actually draws the path you have defined
`arc()`	Creates an arc/curve (used to create circles, or parts of circles)
`fillText()`	Draws "filled" text on the canvas
`strokeText()`	Draws text on the canvas (no fill)

HTML Canvas

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

HTML Canvas