Drawing a circle

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: