arc method

Adds points to a path that represents an arc.

### Syntax

CanvasRenderingContext2D.arc(x, y, radius, startAngle, endAngle, anticlockwise);

### Parameters

x [in]

Type: Floating-point

The x-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.

y [in]

Type: Floating-point

The y-coordinate, in pixels, for the center point of the arc in relation to the upper-left corner of the canvas rectangle.

Type: Floating-point

The radius or distance from the point (x,y) that the arc's path follows.

startAngle [in]

Type: Floating-point

The starting angle, in radians, where 0 is at the 3 o'clock position of the arc's circle.

endAngle [in]

Type: Floating-point

anticlockwise [in]

Type: BOOL

true

The arc is drawn in a counterclockwise direction from start to end.

false

The arc is drawn in a clockwise direction from start to end.

### Return value

This method does not return a value.

### Exceptions

ExceptionCondition
IndexSizeError

The specified radius value is negative.

### Remarks

If the startAngle and endAngle angles are equal, the arc method creates a circle. To convert degrees to radians use the following formula.

``````
var radians = degrees * Math.PI/180
``````

### Examples

The following code example shows several different arcs.

``````
<html>
<title>Arc example</title>
<script type="text/javascript">
function curves() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
for (var i = 0; i < 2; i++)                            // Step through two rows.
{
for (var j = 0; j < 3; j++)                        // Step through three versions.
{
ctx.beginPath();
var x = 25 + j * 50;               // The x-coordinate.
var y = 25 + i * 50;               // The y-coordinate.
var startAngle = 0;                     // The starting point on the circle.
var endAngle = Math.PI + (Math.PI * j) / 2; // The end point on the circle.
var anticlockwise = i % 2 == 0 ? false : true; // The direction of drawing.
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); // Create the arc path.
ctx.stroke();                               // Display the work.
}
}
}
}// Curves
</script>
<canvas id="canvas" width="300" height="300">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

``````