[html5] r1172 - /
whatwg at whatwg.org
whatwg at whatwg.org
Thu Jan 24 20:38:01 PST 2008
Author: ianh
Date: 2008-01-24 20:37:57 -0800 (Thu, 24 Jan 2008)
New Revision: 1172
Modified:
index
source
Log:
[gow] (2) Various changes to how to stroke lines, zero-length line segments, line joins, and line caps.
Modified: index
===================================================================
--- index 2008-01-24 02:34:04 UTC (rev 1171)
+++ index 2008-01-25 04:37:57 UTC (rev 1172)
@@ -24,7 +24,7 @@
<h1 id=html-5>HTML 5</h1>
- <h2 class="no-num no-toc" id=working>Working Draft — 24 January 2008</h2>
+ <h2 class="no-num no-toc" id=working>Working Draft — 25 January 2008</h2>
<p>You can take part in this work. <a
href="http://www.whatwg.org/mailing-list">Join the working group's
@@ -16721,8 +16721,8 @@
<p>The <dfn id=linewidth
title=dom-context-2d-lineWidth><code>lineWidth</code></dfn> attribute
- gives the default width of lines, in coordinate space units. On setting,
- zero and negative values must be ignored, leaving the value unchanged.
+ gives the width of lines, in coordinate space units. On setting, zero and
+ negative values must be ignored, leaving the value unchanged.
<p>When the context is created, the <code title=dom-context-2d-lineWidth><a
href="#linewidth">lineWidth</a></code> attribute must initially have the
@@ -16735,11 +16735,11 @@
<code>square</code>. The <code>butt</code> value means that the end of
each line is a flat edge perpendicular to the direction of the line. The
<code>round</code> value means that a semi-circle with the diameter equal
- to the width of the line is then added on to the end of the line. The
- <code>square</code> value means that at the end of each line is a
- rectangle with the length of the line width and the width of half the line
- width, placed flat against the edge perpendicular to the direction of the
- line. On setting, any other value than the literal strings
+ to the width of the line must then be added on to the end of the line. The
+ <code>square</code> value means that a rectangle with the length of the
+ line width and the width of half the line width, placed flat against the
+ edge perpendicular to the direction of the line, must be added at the end
+ of each line. On setting, any other value than the literal strings
<code>butt</code>, <code>round</code>, and <code>square</code> must be
ignored, leaving the value unchanged.
@@ -16750,38 +16750,51 @@
<p>The <dfn id=linejoin
title=dom-context-2d-lineJoin><code>lineJoin</code></dfn> attribute
defines the type of corners that that UAs will place where two lines meet.
- The three valid values are <code>round</code>, <code>bevel</code>, and
+ The three valid values are <code>bevel</code>, <code>round</code>, and
<code>miter</code>.
- <p>On setting, any other value than the literal strings <code>round</code>,
- <code>bevel</code> and <code>miter</code> must be ignored, leaving the
+ <p>On setting, any other value than the literal strings <code>bevel</code>,
+ <code>round</code>, and <code>miter</code> must be ignored, leaving the
value unchanged.
<p>When the context is created, the <code title=dom-context-2d-lineJoin><a
href="#linejoin">lineJoin</a></code> attribute must initially have the
value <code>miter</code>.
- <p>The <code>round</code> value means that a filled arc connecting the
+ <p>A join exists at any point in a subpath shared by two consecutive pairs
+ of lines. When a subpath is closed, then a join also exists at its first
+ point (equivalent to its last point) connecting the first and last lines
+ in the subpath. In addition to the point where the join occurs, two
+ additional points are relevant to each join: the corners found half the
+ line width away from the join point, perpendicular to the two lines
+ joining at the join point.
+
+ <p>A filled triangle connecting these two opposite corners with a straight
+ line, with the third point of the triangle being the point of the join
+ itself (where the lines touch on the inside of the join), must be rendered
+ at all joins. The <code title=dom-context-2d-lineJoin><a
+ href="#linejoin">lineJoin</a></code> attribute controls whether anything
+ else is rendered. The three aforementioned values have the following
+ meanings:
+
+ <p>The <code>bevel</code> value means that this is all that is rendered at
+ joins.
+
+ <p>The <code>round</code> value means that a filled arc connecting the two
corners on the outside of the join, with the diameter equal to the line
- width, and the origin at the point where the inside edges of the lines
- touch, must be rendered at joins. The <code>bevel</code> value means that
- a filled triangle connecting those two corners with a straight line, the
- third point of the triangle being the point where the lines touch on the
- inside of the join, must be rendered at joins. The <code>miter</code>
- value means that a filled four- or five-sided polygon must be placed at
- the join, with two of the lines being the perpendicular edges of the
- joining lines, and the other two being continuations of the outside edges
- of the two joining lines, as long as required to intersect without going
- over the miter limit.
+ width and the origin at the point of the join, must be rendered at joins.
+ <p>The <code>miter</code> value means that a filled four-sided polygon must
+ be rendered at the join, with two of the lines being the perpendicular
+ edges of the joining lines, and the other two being continuations of the
+ outside edges of the two joining lines, as long as required to intersect
+ without going over the miter limit.
+
<p>The miter length is the distance from the point where the lines touch on
the inside of the join to the intersection of the line edges on the
outside of the join. The miter limit ratio is the maximum allowed ratio of
the miter length to the line width. If the miter limit would be exceeded,
- then a fifth line must be added to the polygon, connecting the two outside
- lines, such that the distance from the inside point of the join to the
- point in the middle of this fifth line is the maximum allowed value for
- the miter length.
+ the four-sided polygon is not rendered.
<p>The miter limit ratio can be explicitly set using the <dfn id=miterlimit
title=dom-context-2d-miterLimit><code>miterLimit</code></dfn> attribute.
@@ -17153,6 +17166,7 @@
title=dom-context-2d-strokeStyle><a
href="#strokestyle">strokeStyle</a></code>, <code
title=dom-context-2d-lineWidth><a href="#linewidth">lineWidth</a></code>,
+ <code title=dom-context-2d-lineCap><a href="#linecap">lineCap</a></code>,
<code title=dom-context-2d-lineJoin><a
href="#linejoin">lineJoin</a></code>, and (if appropriate) <code
title=dom-context-2d-miterLimit><a
@@ -17167,6 +17181,9 @@
title=dom-context-2d-globalCompositeOperation>global composition
operators</a>.
+ <p>Zero length line segments must be pruned before stroking a path. Empty
+ subpaths must be ignored.
+
<p class=note>The transformation is applied to the path when it is drawn,
not when the path is constructed. Thus, a single path can be constructed
and then drawn according to different transformations without recreating
Modified: source
===================================================================
--- source 2008-01-24 02:34:04 UTC (rev 1171)
+++ source 2008-01-25 04:37:57 UTC (rev 1172)
@@ -14274,9 +14274,9 @@
<p>The <dfn
title="dom-context-2d-lineWidth"><code>lineWidth</code></dfn>
- attribute gives the default width of lines, in coordinate space
- units. On setting, zero and negative values must be ignored, leaving
- the value unchanged.</p>
+ attribute gives the width of lines, in coordinate space units. On
+ setting, zero and negative values must be ignored, leaving the value
+ unchanged.</p>
<p>When the context is created, the <code
title="dom-context-2d-lineWidth">lineWidth</code> attribute must
@@ -14290,56 +14290,73 @@
value means that the end of each line is a flat edge perpendicular
to the direction of the line. The <code>round</code> value means
that a semi-circle with the diameter equal to the width of the line
- is then added on to the end of the line. The <code>square</code>
- value means that at the end of each line is a rectangle with the
- length of the line width and the width of half the line width,
- placed flat against the edge perpendicular to the direction of the
- line. On setting, any other value than the literal strings
- <code>butt</code>, <code>round</code>, and <code>square</code> must
- be ignored, leaving the value unchanged.</p>
+ must then be added on to the end of the line. The
+ <code>square</code> value means that a rectangle with the length of
+ the line width and the width of half the line width, placed flat
+ against the edge perpendicular to the direction of the line, must be
+ added at the end of each line. On setting, any other value than the
+ literal strings <code>butt</code>, <code>round</code>, and
+ <code>square</code> must be ignored, leaving the value
+ unchanged.</p>
<p>When the context is created, the <code
title="dom-context-2d-lineCap">lineCap</code> attribute must
initially have the value <code>butt</code>.</p>
+
<p>The <dfn
title="dom-context-2d-lineJoin"><code>lineJoin</code></dfn>
attribute defines the type of corners that that UAs will place where
- two lines meet. The three valid values are <code>round</code>,
- <code>bevel</code>, and <code>miter</code>.</p>
+ two lines meet. The three valid values are <code>bevel</code>,
+ <code>round</code>, and <code>miter</code>.</p>
<p>On setting, any other value than the literal strings
- <code>round</code>, <code>bevel</code> and <code>miter</code> must
+ <code>bevel</code>, <code>round</code>, and <code>miter</code> must
be ignored, leaving the value unchanged.</p>
<p>When the context is created, the <code
title="dom-context-2d-lineJoin">lineJoin</code> attribute must
initially have the value <code>miter</code>.</p>
+ <p>A join exists at any point in a subpath shared by two consecutive
+ pairs of lines. When a subpath is closed, then a join also exists at
+ its first point (equivalent to its last point) connecting the first
+ and last lines in the subpath. In addition to the point where the
+ join occurs, two additional points are relevant to each join: the
+ corners found half the line width away from the join point,
+ perpendicular to the two lines joining at the join point.</p>
+
+ <p>A filled triangle connecting these two opposite corners with a
+ straight line, with the third point of the triangle being the point
+ of the join itself (where the lines touch on the inside of the
+ join), must be rendered at all joins. The <code
+ title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
+ whether anything else is rendered. The three aforementioned values
+ have the following meanings:</p>
+
+ <p>The <code>bevel</code> value means that this is all that is
+ rendered at joins.</p>
+
<p>The <code>round</code> value means that a filled arc connecting
- the corners on the outside of the join, with the diameter equal to
- the line width, and the origin at the point where the inside edges
- of the lines touch, must be rendered at joins. The
- <code>bevel</code> value means that a filled triangle connecting
- those two corners with a straight line, the third point of the
- triangle being the point where the lines touch on the inside of the
- join, must be rendered at joins. The <code>miter</code> value means
- that a filled four- or five-sided polygon must be placed at the
- join, with two of the lines being the perpendicular edges of the
- joining lines, and the other two being continuations of the outside
- edges of the two joining lines, as long as required to intersect
- without going over the miter limit.</p>
+ the two corners on the outside of the join, with the diameter equal
+ to the line width and the origin at the point of the join, must be
+ rendered at joins.</p>
+ <p>The <code>miter</code> value means that a filled four-sided
+ polygon must be rendered at the join, with two of the lines being
+ the perpendicular edges of the joining lines, and the other two
+ being continuations of the outside edges of the two joining lines,
+ as long as required to intersect without going over the miter
+ limit.</p>
+
<p>The miter length is the distance from the point where the lines
touch on the inside of the join to the intersection of the line
edges on the outside of the join. The miter limit ratio is the
maximum allowed ratio of the miter length to the line width. If the
- miter limit would be exceeded, then a fifth line must be added to
- the polygon, connecting the two outside lines, such that the
- distance from the inside point of the join to the point in the
- middle of this fifth line is the maximum allowed value for the miter
- length.</p>
+ miter limit would be exceeded, the four-sided polygon is not
+ rendered.</p>
+
<p>The miter limit ratio can be explicitly set using the <dfn
title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
attribute. On setting, zero and negative values must be ignored,
@@ -14349,6 +14366,7 @@
title="dom-context-2d-miterLimit">miterLimit</code> attribute must
initially have the value <code>10.0</code>.</p>
+
<!-- XXX this section doesn't say what these attributes return or
what they do on setting. not a big deal; it's pretty obvious. but if
anyone complains, we'll have to add it -->
@@ -14731,6 +14749,7 @@
must stroke each subpath of the current path in turn, using the
<code title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineCap">lineCap</code>, <code
title="dom-context-2d-lineJoin">lineJoin</code>, and (if
appropriate) <code
title="dom-context-2d-miterLimit">miterLimit</code> attributes.</p>
@@ -14743,6 +14762,9 @@
<span title="dom-context-2d-globalCompositeOperation">global
composition operators</span>.</p>
+ <p>Zero length line segments must be pruned before stroking a
+ path. Empty subpaths must be ignored.</p>
+
<p class="note">The transformation is applied to the path when it is
drawn, not when the path is constructed. Thus, a single path can be
constructed and then drawn according to different transformations
More information about the Commit-Watchers
mailing list