HTML5 canvas tag

Use the HTML5 canvas tag to add graphics to the web page or document. Use a script to draw the graphics, since the <canvas> tag is only a container for graphics. The canvas is also used in developing games applications and can be animated.

For a canvas to work, you need to add the following attributes,

  • height– Height of the canvas in pixels.
  • width– Width of the canvas in pixels.

You can easily add more than one canvas element on a web page.

Here’ the output,

 HTML5 canvas tag

We added a canvas with width 300 pixels and height 150 pixels. We have drawn a circle with arc method. To draw a circle, you need to set a starting angle of 0 and ending angle of 2 x Pi and the rest of the values are shown below. We also added the radius as 65, X co-ordinate as 150 and y co-ordinate as 75.

Here’s the syntax of the arc method we used,


  • x – The x co-ordinate
  • y – The y co-ordinate
  • radius – radius
  • Starting angle – The starting angle, in radians
  • Ending angle – The starting angle, in radians
HTML5 bdi tag
HTML5 datalist Tag
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading