The HTML canvas element is used to draw graphics on a web page.

All drawing on the HTML canvas must be done with JavaScript.

The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0)

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

To draw text on a canvas, the most important property and methods are font(), fillText(), strokeText()

To draw an image on a canvas, we have to use drawImage() method.

Canvas Tutorials

Home >> Canvas >> Canvas Tutorials

List of Canvas Tutorials

Canvas Intro	The HTML canvas element is used to draw graphics on a web page.
Drawing	All drawing on the HTML canvas must be done with JavaScript.
Coordinates	The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0)
Linear Gradient	Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
Radial Gradient	Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
Text	To draw text on a canvas, the most important property and methods are font(), fillText(), strokeText()
Canvas Image	To draw an image on a canvas, we have to use drawImage() method.