EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

# arc method

Adds points to a path that represents an arc.

## Syntax

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

## Parameters

x [in]

Type: number

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: number

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

Type: number

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

startAngle [in]

Type: number

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

endAngle [in]

Type: number

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. See the example in action.

```
<!DOCTYPE html>
<html>
<title>Arc example</title>
<style>
canvas {
border:solid 1px blue;
}
</style>
<body">
<canvas id="canvas" width="400" height="275">This browser or document mode doesn't support canvas</canvas>
<script>
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 = 75 + j * 125;               // The x-coordinate.
var y = 75 + i * 125;               // 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.lineWidth = 4;
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); // Create the arc path.
ctx.stroke();                               // Display the work.
}
}
}
}// Curves
curves();
</script>
</body>
</html>

```