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