html canvas tag

HTML Canvas tag is used to show graphics in a web page by using with javascript.

A Canvas is just a container on which you can create 2D as well as 3D designs. You can create some animations on canvas.

Canvas is very useful when any company wants to create advertisements. We can create an attractive ad using the canvas tag.

We can create many 2D and 3D games in Canvas using with javascript.


Syntax

Output



Drawing Lines on HTML Canvas

To draw a line using the HTML canvas we need to use four methods.

Sr. No. Method name Description
1 beginPath() It gives instructions to the browser to start the new path to canvas.
2 moveTo(x, y) Used for canvas to set the starting point.
3 lineTo(x, y) It gives instructions to the browser to start the new path to canvas.
4 stroke() To make the line visible we use stroke (). It gives the default color black to line of drawing on canvas.

Output




Drawing Rectangle on HTML Canvas

To draw a rectangle on the canvas we need to use four methods.

Sr. No. Method name Description
1 fillRect(x, y, width, height) Used to give and set the coordinates and dimensions of a rectangle on the canvas.
2 fillStyle Used to give and set the fill color of rectangle.

Output




Drawing Text on Canvas

To draw a text on canvas we need to use two methods.

Sr. No. Method name Description
1 fillText(string, x, y) Used to give string to show on canvas.The position of the string given by x and y.
2 font Used to set the font size, font family and font style of text.

Output




Drawing Circle on Canvas

To draw a circle on the canvas we need to use three methods.

Sr. No. Method name Description
1 beginPath() It gives instructions to the browser to start the new path to canvas.
2 arc(x, y, r, start, stop) Used to set the font size, font family and font style of text.
3 stroke() To make the line visible we use stroke(). It gives the default color black to line of drawing on canvas.

Output




Resources and References

1. W3C Specification.
2. HTML living standard
3. W3C project using Github

Leave a Reply

Your email address will not be published. Required fields are marked *