10 Jul 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Understanding HTML5 Canvas tag</title> </head> <body> <canvas id="newCanvas" width="300" height="150" style="border:2px solid #C70039;"> HTML5 canvas isn't supported by your browser.</canvas> <script> var v = document.getElementById("newCanvas"); var c = v.getContext("2d"); c.beginPath(); c.arc(150,75,65,0,2*Math.PI); c.stroke(); </script> </body> </html> |
Here’ the output,
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,
|
1 2 3 |
arc(x, y, radius, starting angle, ending angle) |
Here,
- 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
No Comments