Kinetic.js custom hit region using arc

Question

I'm working on KinaticJS(Latest version) since three months.

I face issue to customize hit region with arc() function.I want hit region exactly as shown in an image below.

I am using following code but it takes whole minor arc as it's hit region.I only need dark(Black) part shown in image as a hit region.

drawHitFunc: function(context) {          
    context.beginPath();
    var x = 90;
    var y = 100;
    var radius = 67;
    var startAngle = 1 * Math.PI;
    var endAngle = 2.0 * Math.PI;
    var counterClockwise = false;
    context.beginPath();
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStrokeShape(this);
},

Can anybody advice on this.

Thanks for your time and consideration in advance. -Naitik

Answer 1

You may try to use cache and drawHitFromCache: http://jsfiddle.net/lavrton/zPLkn/1/

circularText23.cache({
    x : -67 - 5,
    y : - 67 + -5,
    width : 132 + 15,
    height : 132 + 10
});
circularText23.drawHitFromCache();