diff --git a/Gruntfile.js b/Gruntfile.js
index f47ab788..923eb9e4 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -21,6 +21,7 @@ module.exports = function(grunt) {
'src/shapes/Circle.js',
'src/shapes/Ellipse.js',
'src/shapes/Wedge.js',
+ 'src/shapes/AnnularSection.js',
'src/shapes/Image.js',
'src/shapes/Text.js',
'src/shapes/Line.js',
diff --git a/src/shapes/AnnularSection.js b/src/shapes/AnnularSection.js
new file mode 100644
index 00000000..e939f0de
--- /dev/null
+++ b/src/shapes/AnnularSection.js
@@ -0,0 +1,139 @@
+(function() {
+ /**
+ * AnnularSection constructor
+ * @constructor
+ * @augments Kinetic.Shape
+ * @param {Object} config
+ * @param {Number} config.angle
+ * @param {Number} config.angleDeg angle in degrees
+ * @param {Number} config.innerRadius
+ * @param {Number} config.outerRadius
+ * @param {Boolean} [config.clockwise]
+ * @@shapeParams
+ * @@nodeParams
+ * @example
+ * // draw a AnnularSection that's pointing downwards
+ * var AnnularSection = new Kinetic.AnnularSection({
+ * innerRadius: 40,
+ * outerRadius: 80,
+ * fill: 'red',
+ * stroke: 'black'
+ * strokeWidth: 5,
+ * angleDeg: 60,
+ * rotationDeg: -120
+ * });
+ */
+ Kinetic.AnnularSection = function(config) {
+ this.___init(config);
+ };
+
+ Kinetic.AnnularSection.prototype = {
+ ___init: function(config) {
+ // call super constructor
+ Kinetic.Shape.call(this, config);
+ this.className = 'AnnularSection';
+ },
+ drawFunc: function(context) {
+ context.beginPath();
+ context.arc(0, 0, this.getOuterRadius(), 0, this.getAngle(), this.getClockwise());
+ context.arc(0, 0, this.getInnerRadius(), this.getAngle(), 0, !this.getClockwise());
+ context.closePath();
+ context.fillStrokeShape(this);
+ }
+ };
+ Kinetic.Util.extend(Kinetic.AnnularSection, Kinetic.Shape);
+
+ // add getters setters
+ Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'innerRadius', function() {
+ return 0;
+ });
+
+ /**
+ * set innerRadius
+ * @name setInnerRadius
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @param {Number} innerRadius
+ */
+
+ /**
+ * get innerRadius
+ * @name getInnerRadius
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @returns {Number}
+ */
+
+ Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'outerRadius', function() {
+ return 0;
+ });
+
+ /**
+ * set outerRadius
+ * @name setOuterRadius
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @param {Number} innerRadius
+ */
+
+ /**
+ * get outerRadius
+ * @name getOuterRadius
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @returns {Number}
+ */
+
+ Kinetic.Factory.addRotationGetterSetter(Kinetic.AnnularSection, 'angle', 0);
+
+ /**
+ * set angle
+ * @name setAngle
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @param {Number} angle
+ */
+
+ /**
+ * set angle in degrees
+ * @name setAngleDeg
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @param {Number} angleDeg
+ */
+
+ /**
+ * get angle
+ * @name getAngle
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @returns {Number}
+ */
+
+ /**
+ * get angle in degrees
+ * @name getAngleDeg
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @returns {Number}
+ */
+
+ Kinetic.Factory.addGetterSetter(Kinetic.AnnularSection, 'clockwise', false);
+
+ /**
+ * set clockwise draw direction. If set to true, the AnnularSection will be drawn clockwise
+ * If set to false, the AnnularSection will be drawn anti-clockwise. The default is false.
+ * @name setClockwise
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @param {Boolean} clockwise
+ */
+
+ /**
+ * get clockwise
+ * @name getClockwise
+ * @method
+ * @memberof Kinetic.AnnularSection.prototype
+ * @returns {Boolean}
+ */
+})();
diff --git a/test/runner.html b/test/runner.html
index d263d5b8..53ef47fb 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -63,6 +63,7 @@
+
diff --git a/test/unit/shapes/AnnularSection-test.js b/test/unit/shapes/AnnularSection-test.js
new file mode 100644
index 00000000..abdb4277
--- /dev/null
+++ b/test/unit/shapes/AnnularSection-test.js
@@ -0,0 +1,52 @@
+suite('AnnularSection', function() {
+ // ======================================================
+ test('add annular section', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var annularsection = new Kinetic.AnnularSection({
+ x: 100,
+ y: 100,
+ innerRadius: 50,
+ outerRadius: 80,
+ angle: Math.PI * 0.4,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myAnnularSection',
+ draggable: true
+ });
+
+ layer.add(annularsection);
+ stage.add(layer);
+
+ assert.equal(annularsection.getClassName(), 'AnnularSection');
+
+ var trace = layer.getContext().getTrace();
+ //console.log(trace);
+ assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.257,false);arc(0,0,50,1.257,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();');
+ });
+
+ // ======================================================
+ test('set annular section angle using degrees', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var annularsection = new Kinetic.AnnularSection({
+ x: 100,
+ y: 100,
+ innerRadius: 50,
+ outerRadius: 80,
+ angleDeg: 90,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myAnnularSection',
+ draggable: true,
+ lineJoin: 'round'
+ });
+
+ layer.add(annularsection);
+ stage.add(layer);
+
+ assert.equal(annularsection.getAngle(), Math.PI / 2);
+ });
+});
\ No newline at end of file