How to draw a circle with arc() in HTML5?
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>
Published on 24-Jan-2018 12:28:33
