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

HTML Web Development Front 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>

Nancy Den

Published on 24-Jan-2018 12:28:33

Previous Page Print Page