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.
<!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,
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