To draw a circle in the canvas, you need to add the following code in your <script></script> tags:
<script type="text/javascript">
var c = document.getElementById("canvasTest");
var canvasElement = c.getContext("2d");
canvasElement.beginPath();
canvasElement.arc(95,50,40,0,2*Math.PI);
canvasElement.stroke();
</script>Here, we used canvasElement.beginPath(); to start drawing the circle, canvasElement.arc(95,50,40,0,2*Math.PI); for the shape of the circle, and canvasElement.stroke(); to set the circle visible.
Note
The canvasElement.arc(95,50,40,0,2*Math.PI); statement is similar to canvasElement.arc(x, y, r, sA, eA, ac);,
where x is the starting coordinate from x axis, y is the starting coordinate from y axis, r is the radius of the circle, sA is the starting angle of the circle, eA is the ending angle of the circle, and ac is the direction of the circle. Here, ac denotes anticlockwise.
The output of our code will be the following image:
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.