# Arc

An arc is a segment of a circle. Using this display object, you can get a few different variations. It can be just the stroke, which will look like a curved line. It can also be a curved line with a fill between the end points which gives another result. If you specify the option pieSection to be true, you will get an arc that looks like a pie chart piece, which makes it pretty easy to create pie charts.

When creating an arc you need to specify the radius and start and end angles in degrees. 0 degrees points to the east.

## Properties

direction : String
Defines the direction of the angle. Can be either `clockwise` or `anticlockwise`. Default: `clockwise`
end : Number
The end angle. The value 0 corresponds to east.
pieSection : Boolean (since version 2.3.0)
True if the arc should be drawn like a pie section. Default: false
The radius of the arc.
start : Number
The start angle in degrees. The value 0 corresponds to east.

## Examples

### Example 1

We start by creating a new core instance. Then we create an arc with only a stroke.

Code
``````var canvas = oCanvas.create({
canvas: "#canvas",
background: "#ccc"
});

var arc = canvas.display.arc({
x: 177,
y: 160,
start: 110,
end: -10,
stroke: "10px #0aa"
});

Output

### Example 2

We start by creating a new core instance. Then we create an arc with only a fill.

Code
``````var canvas = oCanvas.create({
canvas: "#canvas",
background: "#ccc"
});

var arc = canvas.display.arc({
x: 177,
y: 160,
start: 110,
end: -10,
fill: "#0aa"
});

Output

### Example 3

We start by creating a new core instance. Then we create an arc with only a fill. By setting the option pieSection to true, it will be drawn like a pie section.

Code
``````var canvas = oCanvas.create({
canvas: "#canvas",
background: "#ccc"
});

var arc = canvas.display.arc({
x: 177,
y: 160,