<html>
<head>
<head>
<title>
html with canvas tag. It is used to draw graphics on HTML page. With this canvas tag, we use javascript to draw it.
</title>
</head>
<body>
<canvas id="straightline" width="500" height="500" style="border:7px dotted #000089;">
<!--we always use canvas id for script-->
<!--since we are going to draw arc, we use attribute width and height with style/css-->
<!-- here the width and height defines canvas size-->
<!--since it has no border so-->
<!--we can use different color with the help of css-->
</canvas>
<script>
var ele = document.getElementById("straightline"); //this code finds the canvas Element using getElementbyID
var object = ele.getContext("2d"); //it creates an object for given canvas using getcontext. Then stores in variable
object.beginPath(); //it begins the path
object.arc(100, 100, 100, 0, Math.PI); //it creates the arc/curve (half circle). We can also use Math.PI/2
//first value is x-co-ordinate
//second value is y-co-ordinate
//third value is radius
//forth value is starting angle
//last value is for one complete rotation/360
object.stroke(); //it draws the circle
</script>
</body>
</html>
