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

radius : Number

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.

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

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

canvas.addChild(arc);

Example 2

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

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

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

canvas.addChild(arc);

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.

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

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

canvas.addChild(arc);