Hole in rectangle by SVG Path in KineticJS

globalCompositeOperation with KineticJS describes how to make a hole in a rectangle by a circle. Instead of a circle I would like to use SVG path to make the hole, such as:

m 876.30799 492.53209 c -36.64554 -0.29484 -69.69962 33.8121 -67.84069 70.49382 3.60444 27.60835 34.32996 46.34894 60.8096 40.13747 10.35153 -2.31261 21.0251 -4.39193 30.54799 -9.18203 10.45071 -6.35814 19.46448 -14.76346 29.73686 -21.39213 10.83886 -8.06083 21.32637 -16.94052 29.19035 -28.02964 -1.53049 -9.55445 -13.2442 -8.25504 -20.39998 -9.87533 -12.44629 -2.06296 -25.58989 -5.04642 -34.93228 -14.14783 -10.44361 -7.80509 -20.00756 -17.00681 -27.11185 -28.00433 z

How can I implement the hole, i.e. context.globalCompositeOperation="destination-out";, into the new Kinetic.Path({ data: path });?

EDIT: I have just found an updated version of the circular hole here:

use globalcompositeoperations on KineticJS 4.7.2

Now it is just a question of making it work for SVG path ;)

Solution

Using an SVG drawing to reveal an obscured image is fairly complicated.

Here are the steps required:

Create a background layer with an image
Create a foreground layer
Create a rectangle covering the foreground to obscure the background image
Create a Kinetic.Path with SVG data
Convert that SVG path to an image using path.toImage
Create a Kinetic.Shape that draws the SVG image using "destination-out" compositing to reveal the background
The Kinetic.Shape is not draggable, so create another Kinetic.Path with the same SVG data to act as a handle to drag the revealing Kinetic.Shape. When this path-handle is dragged, move the revealing shape to the same coordinates.

Demo: http://jsfiddle.net/m1erickson/7Yvt5/

This demo uses a simple SVG rectangle, but you can use any SVG drawing that you need.

enter image description here

Here is example code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var bklayer = new Kinetic.Layer();
    stage.add(bklayer);
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var path;
    var reveal;
    var cutoutImage;
    //var pathData="M 0,0 L50,0 50,50 0,50 z";
    var pathData="M 0,0 L50,0 50,50 0,50 z";

    var img=new Image();
    img.onload=function(){
        start();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function start(){

        var image=new Kinetic.Image({
            x:0,
            y:0,
            width:300,
            height:300,
            image:img
        });
        bklayer.add(image);
        bklayer.draw();

        var rect = new Kinetic.Rect({
            x: 0,
            y: 0,
            width: 300,
            height: 300,
            fill: 'skyblue',
            stroke: 'lightgray',
            strokeWidth: 3
        });
        layer.add(rect);

        // path filled
        var path = new Kinetic.Path({
          x: 0,
          y: 0,
          data:pathData,
          fill: 'green',
        });
        layer.add(path);

        // turn the path into an image
        cutoutImage=path.toImage({
            callback: function(img){
                reveal = new Kinetic.Shape({
                    sceneFunc: function(context) {
                        var ctx=this.getContext()._context;
                        var pos=this.pos;
                        ctx.save();
                        ctx.globalCompositeOperation="destination-out";
                        ctx.drawImage(this.image,pos.x,pos.y);
                        ctx.restore();
                    },
                });
                reveal.pos={x:0,y:0};
                reveal.image=img;
                reveal.position(path1.position());
                layer.add(reveal);
                // remove the original path
                path.remove();
                layer.draw();
            }
        });


        // draggable path
        path1 = new Kinetic.Path({
            x: 0,
            y: 0,
            data:pathData,
            stroke: 'red',
            draggable:true
        });
        path1.on("dragmove",function(){
            reveal.pos=this.position();
            layer.draw();
        });
        layer.add(path1);

        layer.draw();

    }   // end start 


    function addReveal(img){
        reveal = new Kinetic.Shape({
            sceneFunc: function(context) {
                var ctx=this.getContext()._context;
                var pos=this.pos;
                ctx.save();
                ctx.globalCompositeOperation="destination-out";
                ctx.drawImage(this.image,pos.x,pos.y);
                ctx.restore();
            },
        });
        reveal.pos={x:0,y:0};
        reveal.image=img;
        reveal.position(path1.position());
        layer.add(reveal);
        layer.draw();
    }


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>