Question

I want to show only intersection of two shape by using KineticJS.
How can I do this?
I tried to do it like following link.
HTML5 Canvas Clipping Region. Is have any other way?

Answer 1

I have created the solution based on Shmi.

   function makeShapeComposite(shape, operation) {
        shape.attrs._drawFunc = shape.attrs.drawFunc;
        shape.attrs.drawFunc = function (context) {
            context.save();
            context.globalCompositeOperation = operation;
            this.attrs._drawFunc.call(this, context);
            context.restore();
        };
        return shape;
    };   

   var pol=  makeShapeComposite(new Kinetic.RegularPolygon({
           x: 250,
            y: 100,
            sides: 4,
            radius: 70,
            fill: '#00D2FF',
            stroke: 'black',
            strokeWidth: 2
        }), "destination-in");

Fiddle:http://jsfiddle.net/sara9/2v7W2/5/

Refer this tutorial.