4

I am using Konva.js framework and trying to apply an image mask over an other one. The code is fully copied from this post. In this jsfiddle example there is small modifications to add a background (Rect).

The problem is that the background is not properly drawn. To see it in action in the code there is a line to comment/uncomment (to see the problem in action). Is someone have any idea to achieve this ?

Best

let stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});

let layer = new Konva.Layer();
let rect = new Konva.Rect({
    x: 0,
    y: 0,
    width: 900,
    height: 900,
    draggable: true,
    fill: '#ff8619',
});

// -------------------------------------
// Line to comment or uncomment
//layer.add(rect);
// -------------------------------------

stage.add(layer);

let mask = new Image();
mask.onload = () => {
    let img = new Image();
    img.onload = () => {
        let image = new Konva.Shape({
            sceneFunc: (ctx) => {
                ctx.save();
                ctx.drawImage(mask, -image.x(), -image.y(),  200, 200);
                ctx.globalCompositeOperation = 'source-in';
                ctx.drawImage(img, 0, 0, 200, 200);
                ctx.globalCompositeOperation = 'source-over';
                ctx.restore();
            },
            // (!) important
            // for this case you need to define custom hit function
            hitFunc: (ctx) => {
                ctx.rect(0, 0, 200, 200);
                ctx.fillStrokeShape(image);
            },
            draggable: true
        });
        layer.add(image);
        layer.draw();
    };
            img.src = "http://i.imgur.com/kKjW3U4.png";

};
        mask.src = "http://i.imgur.com/fQX2P8S.png";
user8716023
  • 41
  • 2
  • I read your thread on the Konva.js chat and looked at your fiddle. It could be that what you want is really obvious but although I have looked at your fiddle with & without the commented line, I do not understand what you actually want to achieve. Maybe you could provide a picture mock-up ? – Vanquished Wombat Oct 04 '17 at 13:17
  • Thanks for your interest. If you uncomment the code I thought that result will look like : [image1](https://snag.gy/wlR3sO.jpg). But this is not the case. The globalCompositeOperation seems to apply also to the orange Rect in background. Hope to be clear enough Vanquished. – user8716023 Oct 04 '17 at 14:50
  • Did you know you can insert an image directly into your question. Look at the toolbar when editing the question. Looking at that image I see an orange filled foreground rect with a clipping path in shape of an animal and through the clipping area I see another image. On that other question you linked to @lavrton provided 3 links at the end of his answer showing potential solutions - did you see those ? – Vanquished Wombat Oct 04 '17 at 17:11
  • Yes I saw this. But none of them use a Node as background. These standalone prototype avoid the problem I encountered. My Jsfiddle is exactly the third one posted by @lavtron + a orange Rect in background (result I would like to have illustrated with the image I gave in my previous comment). In fact I also try to play with save() and restore() context and globalCompositeOperation to source-over to restore default behavior. But this does not work. The aim of my jsfiddle is to have the result (cf. image) keeping the same interaction on image (draggable) – user8716023 Oct 04 '17 at 17:32

1 Answers1

1

The problem was that you needed to:

1. add a new layer: let layer2 = new Konva.Layer();
2. add it to the stage in the correct order: stage.add(layer2, layer);

Here is the updated:
jsfiddle example

Jason R
  • 416
  • 6
  • 13
  • Hi, thanks for your answer. But I want to manipulate on the same canvas. Thus I do not want to use a second layer. – user8716023 Oct 09 '17 at 14:05