How to have rounded corners for stage or layers in React Konva

Question

Hi ,

I want my stage to look like below image and user will draw on it , my question is how can I do this with React-Konva ? I only saw cornerRadius property in rect. And also users actions should be with in the stage.

thanks in advance

Answer 1

You can do this with CSS styles:

  <Stage width={window.innerWidth} height={window.innerHeight} style={{
    backgroundColor: 'grey',
    borderRadius: '15px',
    overflow: 'hidden'
  }}>

https://codesandbox.io/s/98on17x8xr

Answer 2

The CSS solution is simpler, but if you want to do it with Konva there is a clipping function you can use.

https://konvajs.github.io/docs/clipping/Clipping_Function.html

Answer 3

您可以为Rect对象提供cornerRadius键属性