CODEWITHSUNDEEP
reactjskonvajs
Roshan Fernando
Roshan Fernando

Reputation: 87

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

enter image description here

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

Upvotes: 3

Views: 3782

Answers (3)

Elias Debs
Elias Debs

Reputation: 131

you can provide cornerRadius key attribute to Rect object

Upvotes: 2

Timothy Ryan
Timothy Ryan

Reputation: 198

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

Upvotes: 1

lavrton
lavrton

Reputation: 20288

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

Upvotes: 5

Related Questions