A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

CanvasRoundRect: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
Line 56: Line 56:
* Should these calls be RaisesException? Alternatively they could do nothing for invalid inputs, i.e. negative radii.
* 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?
* Should the spec text use horizontal and vertical like the CSS spec, or stick to x and y?
* Should the overlap be an error that raises an exception, or should we reduce radii until everything works like the CSS spec does it?

Revision as of 19:49, 6 May 2014

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, 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'. If rv is omitted, user agents must act as if it had the same value as rh.

 roundRect(x, y, width, height, rtl, rtr, rbr, rbl);

Adds the path of the round rect to the current path with a radius given for each corner going in a clockwise direction starting from the top-left corner. The radii given are rtl: top-left, rtr: top-right, rbr: bottom-right, rbl: bottom left.

 roundRect(x, y, width, height, rtlh, rtlv, rtrh, rtrv, rbrh, rbrv, rblh, rblv);

Adds the path of the round rect to the current path with a radius given for each corner, both horizontal and vertical dimension, going in a clockwise direction starting from the top-left corner. The radii given are rtlh: top-left-horizontal, rtlv: top-left-vertical, rtrh: top-right-horizontal, rtrv: top-right-vertical, rbrh: bottom-right-horizontal, rbrv: bottom-right-veritcal, rblh: bottom-left-horizontal, rblv: bottom-left-vertical.

Negative values for any radius must cause the implementation to throw an IndexSizeError exception.

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?
  • Should the overlap be an error that raises an exception, or should we reduce radii until everything works like the CSS spec does it?