Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for ctx.roundRect #1695

Merged
merged 3 commits into from
Jan 3, 2024

Conversation

CPatchane
Copy link
Contributor

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
Copy link
Member

lavrton commented Dec 28, 2023

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

@CPatchane
Copy link
Contributor Author

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

I removed the check then 👍

@CPatchane
Copy link
Contributor Author

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?

src/Context.ts Outdated
* @method
* @name Konva.Context#roundRect
*/
roundRect(x: number, y: number, width: number, height: number, radii: number) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@lavrton lavrton merged commit 48ae639 into konvajs:master Jan 3, 2024
@lavrton
Copy link
Member

lavrton commented Jan 3, 2024

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 CPatchane deleted the fix/support_ctx_roundRect branch January 3, 2024 14:34
@CPatchane
Copy link
Contributor Author

CPatchane commented Jan 3, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants