JSFiddle - React, Tailwind, and code Playground

by Nicolas Jardillier

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id="container"></div>

JavaScript

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";