Add support for ctx.roundRect

[CPatchane]

According to the MDN, we should be able to use the roundRect() function on the canvas context.

While we can create rounded rectangles by setting cornerRadius to Rect(), the roundRect() function is particularly useful when we want to clip using a rounded rectangle shape with clipFunc().

Since this function appears to be a recent implementation, it might be a good idea to check if it's supported before running it.

Here I chose to run rect() instead so the result would be at least a rectangle but let me know if you think that we should handle this in a different manner.

[lavrton]

I think we can skip the check, as it is already supported by all major browsers.

[CPatchane]

It was introduced in Chrome 99 less than two years ago.

I removed the check then 👍

[CPatchane]

I just saw that you have a util function to draw round rectangle that is used in some sceneFunc. Should it be used instead to avoid the browser support issue?

[lavrton]

Should type of radii by also an array? Like number | Array<number>?

[CPatchane]

Oh you're right, missed the fact that you can fact an array of corners name 👍

[CPatchane]

It won't be compatible with the internal drawRoundedRectPath function
So let's just use the native API then 👍

[lavrton]

Interesting, I just tried to use ctx.roundRect() directly in Konva.Rect shape when it has corner radius. And it works slower than drawRoundedRectPath. I was expecting a different result.

[CPatchane]

Interesting, I just tried to use ctx.roundRect() directly in Konva.Rect shape when it has corner radius. And it works slower than drawRoundedRectPath. I was expecting a different result.

Ouch, it would be better to have at least the same performance, might be an optimisation issue since it's a recent addition? Or maybe it has more work to do to handle DOMPointInit for radius