WHATWG Wiki - User contributions [en]

CanvasRoundRect

2014-05-07T17:49:38Z

Jcgregorio:

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.
** [https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html#//apple_ref/occ/clm/NSBezierPath/bezierPathWithRoundedRect:xRadius:yRadius: Cocoa]
** [http://skia-autogen.googlecode.com/svn/docs/html/classSkCanvas.html#a8f5223fd2b9dc377071352c8da9f2a75 Skia]
* This feature can be polyfilled, see this [https://github.com/jcgregorio/canvas-5-polyfill fork of canvas-5-polyfill]. [http://jcgregorio.github.io/canvas-5-polyfill/ The polyfill in action].

'''WebIDL'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?
* Should these be methods on CanvasPathMethods or only on Path2D?

CanvasRoundRect

2014-05-07T17:49:01Z

Jcgregorio:

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.
** [https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html#//apple_ref/occ/clm/NSBezierPath/bezierPathWithRoundedRect:xRadius:yRadius: Cocoa]
** [http://skia-autogen.googlecode.com/svn/docs/html/classSkCanvas.html#a8f5223fd2b9dc377071352c8da9f2a75 Skia]
* This feature can be polyfilled, see this [https://github.com/jcgregorio/canvas-5-polyfill fork of canvas-5-polyfill]. [http://jcgregorio.github.io/canvas-5-polyfill/ The polyfill in action].

TODO create polyfill in fork of canvas-5-polyfill.

'''WebIDL'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?
* Should these be methods on CanvasPathMethods or only on Path2D?

CanvasRoundRect

2014-05-07T13:39:50Z

Jcgregorio:

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.
** [https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html#//apple_ref/occ/clm/NSBezierPath/bezierPathWithRoundedRect:xRadius:yRadius: Cocoa]
** [http://skia-autogen.googlecode.com/svn/docs/html/classSkCanvas.html#a8f5223fd2b9dc377071352c8da9f2a75 Skia]
* TODO create polyfill in fork of canvas-5-polyfill.

'''WebIDL'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?
* Should these be methods on CanvasPathMethods or only on Path2D?

CanvasRoundRect

2014-05-06T20:55:29Z

Jcgregorio:

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.
** [https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSBezierPath_Class/Reference/Reference.html#//apple_ref/occ/clm/NSBezierPath/bezierPathWithRoundedRect:xRadius:yRadius: Cocoa]
** [http://skia-autogen.googlecode.com/svn/docs/html/classSkCanvas.html#a8f5223fd2b9dc377071352c8da9f2a75 Skia]
* TODO create polyfill in fork of canvas-5-polyfill.

'''WebIDL'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T20:22:03Z

Jcgregorio:

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.
* TODO create polyfill in fork of canvas-5-polyfill.

'''WebIDL'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T20:21:12Z

Jcgregorio:

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'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect. Each method must create a new subpath containing just the components of the round rect, and must then mark the subpath as closed.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T20:05:50Z

Jcgregorio: /* Details */

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'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== Details ==

The values of x, y, width and height describe the rectangle. All the other parameters describe the radii of the corners for the path of the round rect.

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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T19:54:24Z

Jcgregorio:

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'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
interface CanvasPathMethods {
...
[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);
...
};
</pre>

== 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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T19:52:15Z

Jcgregorio: /* Motivation */

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'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
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);
...
};
</pre>

== 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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T19:51:50Z

Jcgregorio:

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'''

The specification would add the following methods to CanvasPathMethods, which mean they would appear in Path2D and CanvasRenderingContext2D.

<pre>
[
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);
...
};
</pre>

== 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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T19:50:28Z

Jcgregorio:

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'''
<pre>
[
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);
...
};
</pre>

== 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.

Corner curves must not overlap: When the sum of any two adjacent border radii exceeds the size of the border box, the implementation must 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?

CanvasRoundRect

2014-05-06T19:49:28Z

Jcgregorio: /* Open Questions */

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'''
<pre>
[
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);
...
};
</pre>

== 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?

CanvasRoundRect

2014-05-06T19:03:05Z

Jcgregorio: /* Details */

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'''
<pre>
[
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);
...
};
</pre>

== 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?

CanvasRoundRect

2014-05-06T18:56:19Z

Jcgregorio: /* Open Questions */

CanvasRoundRect

2014-05-06T18:55:07Z

Jcgregorio: /* Details */

CanvasRoundRect

2014-05-06T18:35:32Z

Jcgregorio: /* Abstract */

CanvasRoundRect

2014-05-06T18:18:38Z

Jcgregorio: Created page with "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 p..."