HTML canvas tag


<canvas> tag in HTML

The <canvas> tag is a container used for adding graphics, animations, draw text using script.


width and height attribute in <canvas> tag

The width and height attribute is used to set the canvas width and height.

The below code just creates a white space container.

Example 1

Try Yourself

The css border property is used to draw the border.

Example 2 - Draw a border around the <canvas> container

Try Yourself

In the below examples we used Javascript, if it is not understandable leave it, we will see it in upcoming chapters.

Example 3 - Draw rectangle using JavaScript

Try Yourself

Example 4 - Draw circle using JavaScript

Try Yourself