# arc method

The `arc` method draws an arc centered at a given point with a given radius. This arc will become visible only if you apply the `stroke` or `fill` methods. In the first case there will be a stroke, and in the second - a shape.

The last optional parameter controls the drawing direction. It takes the value `true` or `false`. The value `true` draws the arc clockwise, while the value `false` draws the arc counterclockwise (default).

You can set the start and end angles when drawing. These angles are measured in radians, not degrees. To convert degrees to radians you can use the following function:

`function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

## Syntax

`context.arc(x, y, radius, start angle, end angle, [direction = false]);`

## Example

Let's draw a circumference:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(360)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## Example

Let's draw a half of a circumference:

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## Example

Let's draw a half circle (fill in the outline with `fill`):

`<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.fill(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }`

:

## See also

- the `rect` method
  that draws a rectangle

← →
↑
en ru