CanvasRoundRect

Proposal to add roundRect() to Path2D.

Abstract

Roundrects are everywhere, a single call in Path2D to create a round rect can be accelerated as it lets the underlying platform know of the intent to draw a round rect, as opposed to merely composing a round rect from a series of individual paths.

Description

Follow http://dev.w3.org/csswg/css-backgrounds/#border-radius the rules for css border radius.

Motivation

• Speed. TODO - Add some perf measurements against either native skia, or a patch against blink showing the perf increase.
• Ease of use.
• TODO find examples of roundrect in other apis.

WebIDL

[
    NoInterfaceObject, // Always used on target of 'implements'
] interface CanvasPathMethods {
    ...
    [RaisesException] void roundRect(unrestricted float x, unrestricted float y, unrestricted float width, unrestricted float height, 
        unrestricted float radius);
    [RaisesException] void roundRect(unrestricted float x, unrestricted float y, unrestricted float width, unrestricted float height,
        unrestricted float rh, unrestricted float rv);
    [RaisesException] void roundRect(unrestricted float x, unrestricted float y, unrestricted float width, unrestricted float height,
        unrestricted float rtl, unrestricted float rtr, unrestricted float rbr, unrestricted float rbl);
    [RaisesException] void roundRect(unrestricted float x, unrestricted float y, unrestricted float width, unrestricted float height,
        unrestricted float rtlh, unrestricted float rtlv,
        unrestricted float rtrh, unrestricted float rtrv,
        unrestricted float rbrh, unrestricted float rbrv,
        unrestricted float rblh, unrestricted float rblv);
    ...
};

Details

 roundRect(x, y, width, height, radius)

Adds the path of the round rect to the current path. Every corner will have the given radius. Negative values for radius must cause the implementation to throw an IndexSizeError exception. If radiusY is omitted, user agents must act as if it had the same value as radiusX.

 roundRect(x, y, width, height, radius, rh, rv);

Adds the path of the round rect to the current path. Every corner will have a horizontal radius of 'rh and a verical radius of 'rv'. Negative values for rh or rv must cause the implementation to throw an IndexSizeError exception. If rv is omitted, user agents must act as if it had the same value as rh.

 roundRect(x, y, width, height, radius, rtl, rtr, rbr, rbl);
 roundRect(x, y, width, height, radius, rh, rv, rtlh, rtlv, rtrh, rtrv, rbrh, rbrv, rblh, rblv);

Open Questions

• Should these calls be RaisesException? Alternatively they could do nothing for invalid inputs, i.e. negative radii.
• Should the spec text use horizontal and vertical like the CSS spec, or stick to x and y?