the cornerRadius of the image component have no effect in "react-konva": "17.0.2-6"

Question

the version is

"react": "^17.0.2",
"react-dom": "^17.0.2",
"konva": "^7.2.5",
"react-konva": "17.0.2-6"

Looks like it's not implemented,is there another way to solve it?

there is a demo you can try

https://codesandbox.io/s/small-violet-e8qldp?file=/src/index.js

Answer 1

Make sure you use the latest konva version that supports that.

npm install konva@8.4.2

import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Image as KonvaImage } from "react-konva";
import useImage from "use-image";

const App = () => {
  const [image] = useImage(
    "https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3639&q=80"
  );

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <KonvaImage width={400} height={300} image={image} cornerRadius={40} />
      </Layer>
    </Stage>
  );
};

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

https://codesandbox.io/s/quirky-sky-gpcde3?file=/src/index.js