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