use globalcompositeoperations on KineticJS 4.7.2

This was answered at this question using KineticJS 4.6.0 providing this fiddle

But... any idea how to do this on the latest version of kineticjs?

I tried the same fiddle with kineticjs 4.7.2: http://jsfiddle.net/qNtSg/ I just changed drawFunc with the new API

drawFunc: function (context) {
    ... 
    context.fillStrokeShape(this);
}

compositing is not working

The Kinetic.Shape has changed in recent versions.

Now the Shape drawFunc receives a wrapper of the context rather than a canvas.

However, the wrapped context still does not support globalCompositeOperation.

Therefore, you still need to "cheat" by getting the actual html context (instead of the wrapped context).

Here's how to get the actual html context:

drawFunc: function(context) {
    var ctx=this.getContext()._context;
    ....

So here's revised code and a Fiddle: http://jsfiddle.net/m1erickson/h3DGB/

        var reveal = new Kinetic.Shape({
          drawFunc: function(context) {
            var ctx=this.getContext()._context;
            ctx.save();
            ctx.beginPath();
            ctx.globalCompositeOperation="destination-out";
            ctx.arc(120,120,75,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
          },
          dragBoundFunc: function(pos) { return(pos); },
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth:4,
          draggable:true
        });