Summary -

In this topic, we described about the Drawing a circle with detailed example.

The arc() method is used to create a circle in HTML5 with the canvas element.The arc() method builds an arc/curve (used to create circles, or circles parts).For a circle with arc() technique, use the start angle as 0 and end angle to 2*Math.PI.

Syntax -

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

The following table describes the parameter values of the arc() method –

S. No Parameter Description
1 X x-coordinate
2 Y y-coordinate
3 r Radius of the circle
4 startingAngle Starting angle in radians
5 endingAngle Ending angle in radians
6 counterclockwise (True/False) For counterclockwise drawing, select True, else, false

Example -

Following example describes how to draw a circle using arc() method in the empty canvas.
<!DOCTYPE html>      
<html>           
  <body> 
      <canvas id="myCanvas" width="200" height="200" 
                style="border:2px solid #f3d4d3;">               
          Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d"); 
         ctx.beginPath();
         ctx.arc(55,40,30,5,7*Math.PI); 
         ctx.stroke();
      </script>
  </body>
</html>

Output: -

Your browser does not support the HTML5 canvas tag.

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports the arc method -

Method Chrome Edge Firefox Safari Opera
arc( ) Yes 9.0 Yes and above Yes Yes Yes