use globalcompositeoperations on KineticJS 4.7.2

Question 1

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
        });

Question 2

very inspirating answer. My requirments were slightly different but I could do it reading this. Leave a commented fiddle in order to contribute). I do here cause I can't comment yet due to reputation under than 50 :)

Thanks to MarkE for the inspiration again, Stupid thing cannot post fiddle without code

Maxi

<html>
  <head>
    <style>
      body {
        margin: 20px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
 </body>
</html>

Stupid thing cannot post fiddle without code

http://jsfiddle.net/L7eLR/