The canvas is an element of HTML5 which is used to draw Graphics on the webpage.
Using canvas you can combine photos, create geometrical shapes, create animation, text etc.
The default size of canvas is 300px × 150px (height × width) but height and width can be changed using height/width attribute.
Basic canvas creation
<canvas id="your-id" height="value" width="value" ><canvas/>
since the default canvas created is blank and has no border. So to make canvas visible we can create a border.
filling color in canvas
The canvas is by default white in color which can be given any color value.
To fill a color in a rectangle we use the function fillStyle = "color_name" .
To fill a rectangle we use the function fillRect ( left_padding, top_padding, width, height) .
Drawing a line using canvas
First we need to select the target canvas we want to use by id value.
Then we define context for the canvas (2d or 3d) using getContext.
Drawing a circle on canvas
To draw a circle on canvas we use arc() method.
The arc() method takes five arguments: arc( x, y, r, start, stop).