[html5] r7635 - [giow] (2) Introduce canvas 2d context's fillRule attribute Fixing https://www.w [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Jan 3 15:38:01 PST 2013
Author: ianh
Date: 2013-01-03 15:38:00 -0800 (Thu, 03 Jan 2013)
New Revision: 7635
Modified:
complete.html
index
source
Log:
[giow] (2) Introduce canvas 2d context's fillRule attribute
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=19932
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2013-01-02 22:23:36 UTC (rev 7634)
+++ complete.html 2013-01-03 23:38:00 UTC (rev 7635)
@@ -77,7 +77,7 @@
}, false);
function load(script) {
var e = document.createElement('script');
- e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
+ e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script);
document.body.appendChild(e);
}
</script><link href=http://www.whatwg.org/style/specification rel=stylesheet><link href=http://www.whatwg.org/images/icon rel=icon><style>
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 January 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 3 January 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -34921,6 +34921,8 @@
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or
<a href=#imagebitmap>ImageBitmap</a>) <dfn id=canvasimagesource>CanvasImageSource</dfn>;
+enum <dfn id=canvasdrawingstylesfillrules>CanvasDrawingStylesFillRules</dfn> { "<a href=#dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero>nonzero</a>", "<a href=#dom-context-2d-fillrule-evenodd title=dom-context-2d-fillRule-evenodd>evenodd</a>" };
+
[<a href=#dom-context-2d title=dom-context-2d>Constructor</a>(optional unsigned long width, unsigned long height)]
interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
@@ -34996,6 +34998,7 @@
void <a href=#dom-context-2d-strokerect title=dom-context-2d-strokeRect>strokeRect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
// path API (see also <a href=#canvaspathmethods>CanvasPathMethods</a>)
+ attribute <a href=#canvasdrawingstylesfillrules>CanvasDrawingStylesFillRules</a> <a href=#dom-context-2d-fillrule title=dom-context-2d-fillRule>fillRule</a>; // (default "<a href=#dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero>nonzero</a>")
void <a href=#dom-context-2d-beginpath title=dom-context-2d-beginPath>beginPath</a>();
void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>();
void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>(<a href=#path>Path</a> path);
@@ -35548,7 +35551,7 @@
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
- <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
+ <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>
shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
<li>The current <a href=#dash-list>dash list</a>.</li>
</ul><p class=note>The <a href=#current-default-path>current default path</a> and the rendering context's bitmaps are not
part of the drawing state. The <a href=#current-default-path>current default path</a> is persistent, and can only be
@@ -36087,9 +36090,8 @@
<p>Subpaths in the newly created path must wind clockwise,
regardless of the direction of paths in <var title="">path</var>.</p>
<!--
- ...because both of these examples result in two lines (assuming
- non-zero winding rules, things are different under even/odd),
- there's no "hole" where the lines overlap:
+ ...because both of these examples result in two lines (assuming non-zero winding rules,
+ things are different under even/odd), there's no "hole" where the lines overlap:
c.beginPath();
c.lineWidth=30;
@@ -36111,9 +36113,8 @@
c.closePath();
c.stroke();
- ...and we want the same result when you create the two subpaths
- in each example above as two Paths, stroke them onto a third
- Path, and then fill that Path on the context.
+ ...and we want the same result when you create the two subpaths in each example above as two
+ Paths, stroke them onto a third Path, and then fill that Path on the context.
-->
</li>
@@ -37667,11 +37668,6 @@
context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
-->
<p>The <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
@@ -38431,10 +38427,20 @@
<a href=#drawing-state>drawing state</a>. The <a href=#current-default-path>current default path</a> is
a <a href=#concept-path title=concept-path>path</a>, as described above.</p>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> [ = <var title="">value</var> ]</dt>
<dd>
+ <p>Returns the current fill rule, either "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>" or "<code title=dom-context-2d-fillRule-evenodd><a href=#dom-context-2d-fillrule-evenodd>evenodd</a></code>".</p>
+
+ <p>Can be set, to change the fill rule.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
+
+ <dd>
+
<p>Resets the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -38533,7 +38539,36 @@
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
+ <p>The <dfn id=dom-context-2d-fillrule title=dom-context-2d-fillRule><code>fillRule</code></dfn> attribute specifies the
+ context's <dfn id=current-fill-rule>current fill rule</dfn>. The two valid values are "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>" and "<code title=dom-context-2d-fillRule-evenodd><a href=#dom-context-2d-fillrule-evenodd>evenodd</a></code>". On getting, it must return the current
+ value. On setting, the current value must be changed to the new value. When the context is is
+ created, the <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute must initially have
+ the value "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>".</p>
+
+
+ <p>When the context's <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute has the
+ value "<dfn id=dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero><code>nonzero</code></dfn>", the context's
+ <a href=#current-fill-rule>current fill rule</a> is the non-zero winding rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path going in one direction is equal to the
+ number of times it crosses the path going in the other direction.
+
+ </p>
+
+
+ <p>When the context's <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute has the
+ value "<dfn id=dom-context-2d-fillrule-evenodd title=dom-context-2d-fillRule-evenodd><code>evenodd</code></dfn>", the context's
+ <a href=#current-fill-rule>current fill rule</a> is the even-odd rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path is even.
+
+ </p>
+
+ <p>If a point is not outside a shape, it is inside the shape.</p>
+
+ <hr><p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
method must empty the list of subpaths in the context's
<a href=#current-default-path>current default path</a> so that the it once again has zero
subpaths.</p>
@@ -38555,7 +38590,7 @@
<p>The <dfn id=dom-context-2d-fill title=dom-context-2d-fill><code>fill()</code></dfn>
method must fill all the subpaths of the intended path, using <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using the
- non-zero winding number rule. Open subpaths must be implicitly
+ <a href=#current-fill-rule>current fill rule</a>. Open subpaths must be implicitly
closed when being filled (without affecting the actual
subpaths).</p>
@@ -38717,13 +38752,11 @@
user agent is scrolling as the bounding box of the current
selection.</p>
- <hr><p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn>
- method must create a new <dfn id=clipping-region>clipping region</dfn> by calculating
- the intersection of the current clipping region and the area
- described by the intended path, using the non-zero winding number
- rule. Open subpaths must be implicitly closed when computing the
- clipping region, without affecting the actual subpaths. The new
- clipping region replaces the current clipping region.</p>
+ <hr><p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn> method must create a new
+ <dfn id=clipping-region>clipping region</dfn> by calculating the intersection of the current clipping region and the
+ area described by the intended path, using the <a href=#current-fill-rule>current fill rule</a>. Open subpaths must
+ be implicitly closed when computing the clipping region, without affecting the actual subpaths.
+ The new clipping region replaces the current clipping region.</p>
<p>When the context is initialized, the clipping region must be set
to the rectangle with the top left corner at (0,0) and the width and
@@ -38746,7 +38779,7 @@
method must return true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the
method, when treated as coordinates in the canvas coordinate space
unaffected by the current transformation, is inside the intended
- path as determined by the non-zero winding number rule; and must
+ path as determined by the <a href=#current-fill-rule>current fill rule</a>; and must
return false otherwise. Points on the path itself must be considered
to be inside the path. If either of the arguments is infinite or
NaN, then the method must return false.</p>
Modified: index
===================================================================
--- index 2013-01-02 22:23:36 UTC (rev 7634)
+++ index 2013-01-03 23:38:00 UTC (rev 7635)
@@ -77,7 +77,7 @@
}, false);
function load(script) {
var e = document.createElement('script');
- e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script + '?' + encodeURIComponent(location) + '&' + encodeURIComponent(document.referrer));
+ e.setAttribute('src', 'http://www.whatwg.org/specs/web-apps/current-work/' + script);
document.body.appendChild(e);
}
</script><link href=http://www.whatwg.org/style/specification rel=stylesheet><link href=http://www.whatwg.org/images/icon rel=icon><style>
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 January 2013</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 3 January 2013</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -34921,6 +34921,8 @@
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> or
<a href=#imagebitmap>ImageBitmap</a>) <dfn id=canvasimagesource>CanvasImageSource</dfn>;
+enum <dfn id=canvasdrawingstylesfillrules>CanvasDrawingStylesFillRules</dfn> { "<a href=#dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero>nonzero</a>", "<a href=#dom-context-2d-fillrule-evenodd title=dom-context-2d-fillRule-evenodd>evenodd</a>" };
+
[<a href=#dom-context-2d title=dom-context-2d>Constructor</a>(optional unsigned long width, unsigned long height)]
interface <dfn id=canvasrenderingcontext2d>CanvasRenderingContext2D</dfn> {
@@ -34996,6 +34998,7 @@
void <a href=#dom-context-2d-strokerect title=dom-context-2d-strokeRect>strokeRect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
// path API (see also <a href=#canvaspathmethods>CanvasPathMethods</a>)
+ attribute <a href=#canvasdrawingstylesfillrules>CanvasDrawingStylesFillRules</a> <a href=#dom-context-2d-fillrule title=dom-context-2d-fillRule>fillRule</a>; // (default "<a href=#dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero>nonzero</a>")
void <a href=#dom-context-2d-beginpath title=dom-context-2d-beginPath>beginPath</a>();
void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>();
void <a href=#dom-context-2d-fill title=dom-context-2d-fill>fill</a>(<a href=#path>Path</a> path);
@@ -35548,7 +35551,7 @@
<ul class=brief><li>The current <a href=#transformations title=dom-context-2d-transformation>transformation matrix</a>.</li>
<li>The current <a href=#clipping-region>clipping region</a>.</li>
- <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d
-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
+ <li>The current values of the following attributes: <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code>, <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code>, <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, <code title=dom-context-2d-shadowOffsetX><a href=#dom-context-2d-shadowoffsetx>
shadowOffsetX</a></code>, <code title=dom-context-2d-shadowOffsetY><a href=#dom-context-2d-shadowoffsety>shadowOffsetY</a></code>, <code title=dom-context-2d-shadowBlur><a href=#dom-context-2d-shadowblur>shadowBlur</a></code>, <code title=dom-context-2d-shadowColor><a href=#dom-context-2d-shadowcolor>shadowColor</a></code>, <code title=dom-context-2d-globalCompositeOperation><a href=#dom-context-2d-globalcompositeoperation>globalCompositeOperation</a></code>, <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>, <code title=dom-context-2d-direction><a href=#dom-context-2d-direction>direction</a></code>, <code title=dom-context-2d-imageSmoothingEnabled><a href=#dom-context-2d-imagesmoothingenabled>imageSmoothingEnabled</a></code>.</li>
<li>The current <a href=#dash-list>dash list</a>.</li>
</ul><p class=note>The <a href=#current-default-path>current default path</a> and the rendering context's bitmaps are not
part of the drawing state. The <a href=#current-default-path>current default path</a> is persistent, and can only be
@@ -36087,9 +36090,8 @@
<p>Subpaths in the newly created path must wind clockwise,
regardless of the direction of paths in <var title="">path</var>.</p>
<!--
- ...because both of these examples result in two lines (assuming
- non-zero winding rules, things are different under even/odd),
- there's no "hole" where the lines overlap:
+ ...because both of these examples result in two lines (assuming non-zero winding rules,
+ things are different under even/odd), there's no "hole" where the lines overlap:
c.beginPath();
c.lineWidth=30;
@@ -36111,9 +36113,8 @@
c.closePath();
c.stroke();
- ...and we want the same result when you create the two subpaths
- in each example above as two Paths, stroke them onto a third
- Path, and then fill that Path on the context.
+ ...and we want the same result when you create the two subpaths in each example above as two
+ Paths, stroke them onto a third Path, and then fill that Path on the context.
-->
</li>
@@ -37667,11 +37668,6 @@
context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
-->
<p>The <dfn id=dom-context-2d-fillstyle title=dom-context-2d-fillStyle><code>fillStyle</code></dfn>
@@ -38431,10 +38427,20 @@
<a href=#drawing-state>drawing state</a>. The <a href=#current-default-path>current default path</a> is
a <a href=#concept-path title=concept-path>path</a>, as described above.</p>
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> [ = <var title="">value</var> ]</dt>
<dd>
+ <p>Returns the current fill rule, either "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>" or "<code title=dom-context-2d-fillRule-evenodd><a href=#dom-context-2d-fillrule-evenodd>evenodd</a></code>".</p>
+
+ <p>Can be set, to change the fill rule.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
+
+ <dd>
+
<p>Resets the <a href=#current-default-path>current default path</a>.</p>
</dd>
@@ -38533,7 +38539,36 @@
</dl><div class=impl>
- <p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
+ <p>The <dfn id=dom-context-2d-fillrule title=dom-context-2d-fillRule><code>fillRule</code></dfn> attribute specifies the
+ context's <dfn id=current-fill-rule>current fill rule</dfn>. The two valid values are "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>" and "<code title=dom-context-2d-fillRule-evenodd><a href=#dom-context-2d-fillrule-evenodd>evenodd</a></code>". On getting, it must return the current
+ value. On setting, the current value must be changed to the new value. When the context is is
+ created, the <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute must initially have
+ the value "<code title=dom-context-2d-fillRule-nonzero><a href=#dom-context-2d-fillrule-nonzero>nonzero</a></code>".</p>
+
+
+ <p>When the context's <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute has the
+ value "<dfn id=dom-context-2d-fillrule-nonzero title=dom-context-2d-fillRule-nonzero><code>nonzero</code></dfn>", the context's
+ <a href=#current-fill-rule>current fill rule</a> is the non-zero winding rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path going in one direction is equal to the
+ number of times it crosses the path going in the other direction.
+
+ </p>
+
+
+ <p>When the context's <code title=dom-context-2d-fillRule><a href=#dom-context-2d-fillrule>fillRule</a></code> attribute has the
+ value "<dfn id=dom-context-2d-fillrule-evenodd title=dom-context-2d-fillRule-evenodd><code>evenodd</code></dfn>", the context's
+ <a href=#current-fill-rule>current fill rule</a> is the even-odd rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path is even.
+
+ </p>
+
+ <p>If a point is not outside a shape, it is inside the shape.</p>
+
+ <hr><p>The <dfn id=dom-context-2d-beginpath title=dom-context-2d-beginPath><code>beginPath()</code></dfn>
method must empty the list of subpaths in the context's
<a href=#current-default-path>current default path</a> so that the it once again has zero
subpaths.</p>
@@ -38555,7 +38590,7 @@
<p>The <dfn id=dom-context-2d-fill title=dom-context-2d-fill><code>fill()</code></dfn>
method must fill all the subpaths of the intended path, using <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>, and using the
- non-zero winding number rule. Open subpaths must be implicitly
+ <a href=#current-fill-rule>current fill rule</a>. Open subpaths must be implicitly
closed when being filled (without affecting the actual
subpaths).</p>
@@ -38717,13 +38752,11 @@
user agent is scrolling as the bounding box of the current
selection.</p>
- <hr><p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn>
- method must create a new <dfn id=clipping-region>clipping region</dfn> by calculating
- the intersection of the current clipping region and the area
- described by the intended path, using the non-zero winding number
- rule. Open subpaths must be implicitly closed when computing the
- clipping region, without affecting the actual subpaths. The new
- clipping region replaces the current clipping region.</p>
+ <hr><p>The <dfn id=dom-context-2d-clip title=dom-context-2d-clip><code>clip()</code></dfn> method must create a new
+ <dfn id=clipping-region>clipping region</dfn> by calculating the intersection of the current clipping region and the
+ area described by the intended path, using the <a href=#current-fill-rule>current fill rule</a>. Open subpaths must
+ be implicitly closed when computing the clipping region, without affecting the actual subpaths.
+ The new clipping region replaces the current clipping region.</p>
<p>When the context is initialized, the clipping region must be set
to the rectangle with the top left corner at (0,0) and the width and
@@ -38746,7 +38779,7 @@
method must return true if the point given by the <var title="">x</var> and <var title="">y</var> coordinates passed to the
method, when treated as coordinates in the canvas coordinate space
unaffected by the current transformation, is inside the intended
- path as determined by the non-zero winding number rule; and must
+ path as determined by the <a href=#current-fill-rule>current fill rule</a>; and must
return false otherwise. Points on the path itself must be considered
to be inside the path. If either of the arguments is infinite or
NaN, then the method must return false.</p>
Modified: source
===================================================================
--- source 2013-01-02 22:23:36 UTC (rev 7634)
+++ source 2013-01-03 23:38:00 UTC (rev 7635)
@@ -40724,6 +40724,8 @@
<span>CanvasRenderingContext2D</span> or
<span>ImageBitmap</span>) <dfn>CanvasImageSource</dfn>;
+enum <dfn>CanvasDrawingStylesFillRules</dfn> { "<span title="dom-context-2d-fillRule-nonzero">nonzero</span>", "<span title="dom-context-2d-fillRule-evenodd">evenodd</span>" };
+
[<span title="dom-context-2d">Constructor</span>(optional unsigned long width, unsigned long height)]
interface <dfn>CanvasRenderingContext2D</dfn> {
@@ -40799,6 +40801,7 @@
void <span title="dom-context-2d-strokeRect">strokeRect</span>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
// path API (see also <span>CanvasPathMethods</span>)
+ attribute <span>CanvasDrawingStylesFillRules</span> <span title="dom-context-2d-fillRule">fillRule</span>; // (default "<span title="dom-context-2d-fillRule-nonzero">nonzero</span>")
void <span title="dom-context-2d-beginPath">beginPath</span>();
void <span title="dom-context-2d-fill">fill</span>();
void <span title="dom-context-2d-fill">fill</span>(<span>Path</span> path);
@@ -41434,6 +41437,7 @@
<li>The current values of the following attributes: <code
title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
title="dom-context-2d-fillStyle">fillStyle</code>, <code
+ title="dom-context-2d-fillRule">fillRule</code>, <code
title="dom-context-2d-globalAlpha">globalAlpha</code>, <code
title="dom-context-2d-lineWidth">lineWidth</code>, <code
title="dom-context-2d-lineCap">lineCap</code>, <code
@@ -42066,9 +42070,8 @@
regardless of the direction of paths in <var
title="">path</var>.</p>
<!--
- ...because both of these examples result in two lines (assuming
- non-zero winding rules, things are different under even/odd),
- there's no "hole" where the lines overlap:
+ ...because both of these examples result in two lines (assuming non-zero winding rules,
+ things are different under even/odd), there's no "hole" where the lines overlap:
c.beginPath();
c.lineWidth=30;
@@ -42090,9 +42093,8 @@
c.closePath();
c.stroke();
- ...and we want the same result when you create the two subpaths
- in each example above as two Paths, stroke them onto a third
- Path, and then fill that Path on the context.
+ ...and we want the same result when you create the two subpaths in each example above as two
+ Paths, stroke them onto a third Path, and then fill that Path on the context.
-->
</li>
@@ -43972,11 +43974,6 @@
context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly
- * fill rule for deciding between winding and even-odd algorithms.
- SVG has fill-rule: nonzero | evenodd
- http://www.w3.org/TR/SVG/painting.html#FillProperties
- see also mozFillRule: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-June/032002.html
-
-->
<p>The <dfn
@@ -44899,6 +44896,16 @@
<dl class="domintro">
+ <dt><var title="">context</var> . <code title="dom-context-2d-fillRule">fillRule</code> [ = <var title="">value</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the current fill rule, either "<code title="dom-context-2d-fillRule-nonzero">nonzero</code>" or "<code title="dom-context-2d-fillRule-evenodd">evenodd</code>".</p>
+
+ <p>Can be set, to change the fill rule.</p>
+
+ </dd>
+
<dt><var title="">context</var> . <code title="dom-context-2d-beginPath">beginPath</code>()</dt>
<dd>
@@ -45003,6 +45010,39 @@
<div class="impl">
+ <p>The <dfn title="dom-context-2d-fillRule"><code>fillRule</code></dfn> attribute specifies the
+ context's <dfn>current fill rule</dfn>. The two valid values are "<code
+ title="dom-context-2d-fillRule-nonzero">nonzero</code>" and "<code
+ title="dom-context-2d-fillRule-evenodd">evenodd</code>". On getting, it must return the current
+ value. On setting, the current value must be changed to the new value. When the context is is
+ created, the <code title="dom-context-2d-fillRule">fillRule</code> attribute must initially have
+ the value "<code title="dom-context-2d-fillRule-nonzero">nonzero</code>".</p>
+
+
+ <p>When the context's <code title="dom-context-2d-fillRule">fillRule</code> attribute has the
+ value "<dfn title="dom-context-2d-fillRule-nonzero"><code>nonzero</code></dfn>", the context's
+ <span>current fill rule</span> is the non-zero winding rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path going in one direction is equal to the
+ number of times it crosses the path going in the other direction.
+
+ </p>
+
+
+ <p>When the context's <code title="dom-context-2d-fillRule">fillRule</code> attribute has the
+ value "<dfn title="dom-context-2d-fillRule-evenodd"><code>evenodd</code></dfn>", the context's
+ <span>current fill rule</span> is the even-odd rule, wherein
+
+ a point is considered to be outside a shape if the number of times a half-infinite straight
+ line drawn from that point crosses the shape's path is even.
+
+ </p>
+
+ <p>If a point is not outside a shape, it is inside the shape.</p>
+
+ <hr>
+
<p>The <dfn
title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
method must empty the list of subpaths in the context's
@@ -45028,7 +45068,7 @@
<p>The <dfn title="dom-context-2d-fill"><code>fill()</code></dfn>
method must fill all the subpaths of the intended path, using <code
title="dom-context-2d-fillStyle">fillStyle</code>, and using the
- non-zero winding number rule. Open subpaths must be implicitly
+ <span>current fill rule</span>. Open subpaths must be implicitly
closed when being filled (without affecting the actual
subpaths).</p>
@@ -45238,13 +45278,11 @@
<hr>
- <p>The <dfn title="dom-context-2d-clip"><code>clip()</code></dfn>
- method must create a new <dfn>clipping region</dfn> by calculating
- the intersection of the current clipping region and the area
- described by the intended path, using the non-zero winding number
- rule. Open subpaths must be implicitly closed when computing the
- clipping region, without affecting the actual subpaths. The new
- clipping region replaces the current clipping region.</p>
+ <p>The <dfn title="dom-context-2d-clip"><code>clip()</code></dfn> method must create a new
+ <dfn>clipping region</dfn> by calculating the intersection of the current clipping region and the
+ area described by the intended path, using the <span>current fill rule</span>. Open subpaths must
+ be implicitly closed when computing the clipping region, without affecting the actual subpaths.
+ The new clipping region replaces the current clipping region.</p>
<p>When the context is initialized, the clipping region must be set
to the rectangle with the top left corner at (0,0) and the width and
@@ -45272,7 +45310,7 @@
title="">x</var> and <var title="">y</var> coordinates passed to the
method, when treated as coordinates in the canvas coordinate space
unaffected by the current transformation, is inside the intended
- path as determined by the non-zero winding number rule; and must
+ path as determined by the <span>current fill rule</span>; and must
return false otherwise. Points on the path itself must be considered
to be inside the path. If either of the arguments is infinite or
NaN, then the method must return false.</p>
More information about the Commit-Watchers
mailing list