Kinetic js 5.1 globalCompositeOperation how to

I'm fairly new to Kinetic JS. Im trying to get some .globalCompositeOperation to work in 2 parts of a project I have, I have tried several solutions I can find here, using 'drawFunc', and 'sceneFunc', etc... but so far no luck.

One part of the project Im trying to get 'destination-out' to work on a kinetic.Sprite:

var strokesSprite = new Kinetic.Sprite({
                        image: e,
                        animation: 'intro',
                        animations: {
                            'intro': config.spritestrokes.frames
                        },
                        frameRate: 7,
                        frameIndex: 0,
                        sceneFunc: function (ctx) {
                            ctx.save();
                            ctx.globalCompositeOperation = 'destination-out';
                            ctx.restore();
                        }

    var strokes = new Kinetic.Layer({
                        width: 1280,
                        height: 1280,
                        x: stage.getWidth() / 2,
                        y: stage.getHeight() / 2,
                        offset: {
                            x: 1280 / 2,
                            y: 1280 / 2
                        }
                    });
                    strokes.add(backgroundPainted);
                    strokes.add(strokesSprite);
                    strokes.draw();
                    stage.add(strokes);

"backgroundPainted" is a Kinetic.Image

Unfortunately all I get here is the sprite layer being animated on top of the 'backgroundPainted', but no composite operation being applied :(.

For the 2nd instance I have, its actually very similar, I just have 2 layers, both with shapes inside, added to the stage. Im applying the same 'sceneFunc' to the layer on top, and drawing them then. The layers just both display, with no composition being applied. :(

Any pointers on what I should look at? I see that for example 'drawFunc' has been changed to 'sceneFunc' recently, and maybe something else has changed, as Ive tried pretty much all examples I can find here on stack.

Thanks

KineticJS does not support globalCompositeOperation.

KineticJS gives you a wrapper around an html5 canvas context, but that wrapper is a subset of the context which does not include the context.globalCompositeOperation property.

A workaround

You can create a canvas element (without appending it to the page). Do your compositing on that offscreen canvas. To present that canvas inside KineticJS, just create a Kinetic.Image with the image property pointing to the offscreen canvas:

var myOffscreenCanvas=document.createElement("canvas");

... do compositing ...

// this Kinetic.Image will display myOffscreenCanvas

var myCompositedImage = new Kinetic.Image({

    image:myOffscreenCanvas,

    ...

});