How to Add styling to Image Component in React Konva

I am complete beginner in react konva. I am using Image component with the use-image hook to display a picture but I want the picture to be round. I tried different css approach but nothing seems to work. Any Help is much appreciated

import picture from "../assets/pic.jpg";

const [image] = useImage(picture);

<Layer><Image borderRadius="50%" image={image} /></Layer>


Konva.Image doesn’t have border radius property. It is not a DOM element, so you can’t apply CSS styles to it.

You can emulate border radius effect with group clipping.

const RoundedImage = ({}) => {
  const [image] = useImage("");
  return (
      clipFunc={(ctx) => {
        const cornerRadius = 20;
        const width = image ? image.width : 0;
        const height = image ? image.height : 0;
        ctx.moveTo(cornerRadius, 0);
        ctx.lineTo(width - cornerRadius, 0);
        ctx.quadraticCurveTo(width, 0, width, cornerRadius);
        ctx.lineTo(width, height - cornerRadius);
        ctx.quadraticCurveTo(width, height, width - cornerRadius, height);
        ctx.lineTo(cornerRadius, height);
        ctx.quadraticCurveTo(0, height, 0, height - cornerRadius);
        ctx.lineTo(0, cornerRadius);
        ctx.quadraticCurveTo(0, 0, cornerRadius, 0);
      <Image image={image} />