How to draw a circle with arc() in HTML5?

HTML5 Web Development Front End Technology

The arc() is a method of the canvas 2D API.The arc() method allows you to draw a circular arc.

Syntax

Following is the syntax to draw a circle with arc() in HTML5

arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

The arc() method generates a circular arc with a radius of radius, centred at (x, y). The path moves in the counter clockwise direction and begins at startAngle and finishes at endAngle (defaulting to clockwise).

Parameters

Following are the parameters of this method −

X − The arc's center's horizontal coordinate.
Y − The arc's center's vertical coordinate.
Radius − The arc's diameter. It must be uplifting.
StartAngle − The positive x-axis-measured angle in radians at which the arc begins.
EndAngle − The arc's final angle, expressed in radians and measured in relation to the positive x-axis
Counterclockwise − A potential Boolean indicator. Draws the arc anticlockwise between the start and finish angles if the condition is true default value of this is false (clockwise).

For getting the better understanding of how to draw a circle with arc in HTML5 lets look into the following examples.

Example 1

In the following example we are using arc() to draw a circle on our canvas.for getting full circle we have to mention start angle as 0,end angle as 360.


<!DOCTYPE html>
<html>
<body>
   <canvas id="Varma" width="300" height="150"></canvas>
   
   <script>
      var c = document.getElementById("Varma");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 360);
      ctx.stroke();
   </script>

</body>
</html>

On executing the above script, it will generate the output displaying the circle drawn with ctx.arc on the webpage.

Example 2

Following is another example for this −


<!DOCTYPE html>
<html>
<head>
   <title>HTML Canvas</title>
<head>
<body>
   <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
   
   <script>
      var c = document.getElementById("newCanvas");
      var ctxt = c.getContext("2d");
      ctxt.beginPath();
      ctxt.arc(100,75,50,0,2*Math.PI);
      ctxt.stroke();
   </script>

</body>
</html>