[whatwg] Canvas roundedRect

[FOUSHEE, SEAN]

An object with rounded corners does not mean it is an UI element or defined as a hit region. I've been designing a canvas-based layout app and the ability to use rounded corners for objects within a layout would be very helpful from an aesthetic point-of-view. 

Sean Fousheé
Sent from my iPhone

On Jun 21, 2012, at 12:36 PM, "David Dailey" <ddailey at zoominternet.net> wrote:

> It seems to me that the primary use of rounded rectangles is for UI's rather
> than art, and as such, SVG, that supports DOM and events, already has syntax
> for rounded rectangles. I have seen how the <canvas> folks like to re-invent
> wheels, but the path syntax within canvas already should allow creation of
> line arc line arc sequences, and making things too easy would not appeal to
> the <canvas> machismo would it?
> 
> How many rounded rectangles have you ever seen that don't invite
> mouseclicks? And then do you really want to try to calculate whether or not
> the mouse event is atop one of those thingies, particularly after it has
> been rotated, scaled and skewed? 
> 
> I'm just not seeing why <canvas> would need this.
> 
> Regards
> David
> 
> -----Original Message-----
> From: whatwg-bounces at lists.whatwg.org
> [mailto:whatwg-bounces at lists.whatwg.org] On Behalf Of Igor Trindade Oliveira
> Sent: Thursday, June 21, 2012 12:59 PM
> To: whatwg at lists.whatwg.org
> Subject: [whatwg] Canvas roundedRect
> 
> Currently, canvas2d does not have support for rounded rectangles and the web
> developers are implementing rounded rectangles using arcs or bezier
> curves.[1][2] So i propose the addition of two new functions:
> 
> void fillRoundedRect(unrestricted double x, unrestricted double y,
> unrestricted double w, unrestricted double h, unrestricted double xRadius,
> unrestricted double yRadius); void strokeRoundedRect(unrestricted double x,
> unrestricted double y, unrestricted double w, unrestricted double h,
> unrestricted double xRadius, unrestricted double yRadius);
> 
> Where the xRadius and yRadius arguments specify the radii of the ellipses
> defining the corners of the rounded rectangle.
> 
> Additionally, if we know that the path is a rounded rectangle, we can make
> optimizations in the graphics libraries reducing the amount of tesselations.
> 
> [1] http://www.scriptol.com/html5/canvas/rounded-rectangle.php
> [2]
> http://www.supercalifrigginawesome.com/Extending-Canvas-to-Draw-Rounded-Rect
> angles
> 
> 
>