React Konva Blend Modes

Question

I'm having trouble recreating a blendmode between two Rectangle nodes using react-konva. So far I've tried changing the order the nodes are rendered, adding extra groups and applying the composite operation to those and setting the composite operation onMount.

Here's a working example using Konva and vanilla js:

https://codepen.io/jagomez8/pen/xQwdvq

    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });
    var layer = new Konva.Layer();

    var rect1 = new Konva.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        fill: 'red',
    });

    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        fill: 'green',
        globalCompositeOperation: 'destination-in'
    });

    layer.add(rect2);
    stage.add(layer);

Here's the react version that I'm struggling to achieve the same effect:

https://codepen.io/jagomez8/pen/qQOjWj

  const {Layer, Rect, Stage, Group, Circle} = ReactKonva;

  class TestGroup extends React.Component {

    render() {
      return (
        <Group >
            <Rect width={100} height={100}  x={0} y={0} fill="red" />
            <Rect 
              fill="green"
              x={50} y={50}
              width={100} height={100}
              globalCompositeOperation='destination-in'
            />
         </Group>
      );
    }
  }


  function App() {
      return (
        <Stage width={700} height={700}>
          <Layer>
              <TestGroup/>
          </Layer>
        </Stage>
      );
  }


  ReactDOM.render(<App/>, document.getElementById('app'));

Any insight would be greatly appreciated. Thank you!

Answer 1

In your second demo, you are using a very old version of react and konva. You just need to update them and the demo will work just fine:

import React, { Component } from "react";
import Konva from "konva";
import { render } from "react-dom";
import { Stage, Layer, Rect } from "react-konva";

class App extends Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect width={100} height={100} x={0} y={0} fill="red" />
          <Rect
            fill="green"
            x={50}
            y={50}
            width={100}
            height={100}
            globalCompositeOperation="destination-in"
          />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/9y5n94wkxw