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

HTMLWeb DevelopmentFront End Technology

The arc() method is used to create a circle in HTML5 with the canvas element. For a circle with arc() method, use the start angle as 0 and end angle to 2*Math.PI.

Here are 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 counter clockwise drawing, select True, else, false


Example

You can try to run the following code to draw a circle with arc() method in HTML5 −

<!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>
raja
Published on 24-Jan-2018 16:58:33
Advertisements