[html5] r8225 - [giow] (3) Change how tracing a path works so that it's more similar to SVG, PDF [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Oct 15 16:17:56 PDT 2013
Author: ianh
Date: 2013-10-15 16:17:54 -0700 (Tue, 15 Oct 2013)
New Revision: 8225
Modified:
complete.html
index
source
Log:
[giow] (3) Change how tracing a path works so that it's more similar to SVG, PDF, etc.
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2013-10-15 22:29:22 UTC (rev 8224)
+++ complete.html 2013-10-15 23:17:54 UTC (rev 8225)
@@ -34420,7 +34420,7 @@
interface is created, the <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>
attribute must initially have the value <code>0.0</code>.</p>
- <hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>,
+ <hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>, <!-- <dfn>trace a path</dfn> -->
given an object <var title="">style</var> that implements the
<code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface, it must run the following
algorithm. This algorithm returns a new <a href=#concept-path title=concept-path>path</a>.</p>
@@ -34428,6 +34428,8 @@
<ol><li><p>Let <var title="">path</var> be a copy of the path being
traced.</li>
+ <!-- PATH SANITIZATION -->
+
<li><p>Remove from <var title="">path</var> any subpaths containing
no lines (i.e. subpaths with
just one point).</li>
@@ -34449,138 +34451,148 @@
first line).</p>
<li><p>If the <var title="">styles</var> <a href=#dash-list>dash list</a> is
- empty, jump to the step labeled <i>joins</i>.</li>
+ empty, jump to the step labeled <i>convert</i>.</li>
- <li><p>Let <var title="">width</var> be the aggregate length of all
- the lines of all the subpaths in <var title="">path</var>, in
- coordinate space units.</li>
+ <!-- DASHING -->
- <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
- coordinate space units.</li>
+ <li><p>Let <var title="">pattern width</var> be the concatenation of all the entries of the <var title="">styles</var> <a href=#dash-list>dash list</a>, in coordinate space units.</p>
- <li>
+ <li><p>For each subpath <var title="">subpath</var> in <var title="">path</var>, run the
+ following substeps. These substeps mutate the subpaths in <var title="">path</var> <i>in
+ vivo</i>.</p>
- <p>While <var title="">offset</var> is greater than <var title="">width</var>, decrement it by <var title="">width</var>.</p>
+ <ol><li><p>Let <var title="">subpath width</var> be the length of all the lines of <var title="">subpath</var>, in coordinate space units.</p>
- <p>While <var title="">offset</var> is less than <var title="">width</var>, increment it by <var title="">width</var>.</p>
+ <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
+ coordinate space units.</li>
- </li>
+ <li>
+
+ <p>While <var title="">offset</var> is greater than <var title="">pattern width</var>, decrement it by <var title="">pattern width</var>.</p>
+
+ <p>While <var title="">offset</var> is less than <var title="">pattern width</var>, increment it by <var title="">pattern width</var>.</p>
- <li><p><i>Offset subpath</i>: If <var title="">offset</var> is
- non-zero, add a new subpath at the start of <var title="">path</var> consisting of two points connected by a line
- whose length is <var title="">offset</var> coordinate space units.
- (This path is temporary and will be removed in the <i>joins</i>
- step below. Its purpose is to offset the dash pattern.)</p>
+ </li>
- <li><p>Define <var title="">L</var> to be a linear coordinate line
- defined along all lines in all the subpaths in <var title="">path</var>, such that the start of the first line in the
- first subpath is defined as coordinate 0, and the end of the last
- line in the last subpath is defined as coordinate <var title="">width</var>.</li>
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ defined along all lines in <var title="">subpath</var>, such that the start of the first line in the
+ subpath is defined as coordinate 0, and the end of the last
+ line in the subpath is defined as coordinate <var title="">width</var>.</li>
- <li><p>Let <var title="">position</var> be 0.</li>
+ <li><p>Let <var title="">position</var> be zero minus <var title="">offset</var>.</li>
- <li><p>Let <var title="">index</var> be 0.</li>
+ <li><p>Let <var title="">index</var> be 0.</li>
- <li><p>Let <var title="">current state</var> be <i>off</i> (the
- other states being <i>on</i> and <i>zero-on</i>).</li>
+ <li><p>Let <var title="">current state</var> be <i>off</i> (the
+ other states being <i>on</i> and <i>zero-on</i>).</li>
- <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <a href=#dash-list>dash
- list</a>'s <var title="">index</var>th entry.</li>
+ <li><p><i>Dash on</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
- <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
- <i>joins</i>.</li>
+ <li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then end these substeps for this subpath and start them
+ again for the next subpath; if there are no more subpaths, then jump to the step labeled
+ <i>convert</i> instead.</li>
- <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
+ <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
- <li><p>Increment <var title="">index</var> by one.</li>
+ <li><p>Increment <var title="">index</var> by one.</li>
- <li><p><i>Dash Off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <a href=#dash-list>dash
- list</a>'s <var title="">index</var>th entry.</li>
+ <li><p><i>Dash off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
- <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+ <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
- <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then let <var title="">end</var> be the
- offset <var title="">width</var> on <var title="">L</var>.
- Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+ <li><p>If <var title="">position</var> is less than zero, then jump to the step labeled
+ <i>post-cut</i>.</li> <!-- start and end both before zero -->
- <li>
+ <li><p>If <var title="">start</var> is less than zero, then let <var title="">start</var> be
+ zero.</li> <!-- end will be (at or) after zero -->
- <p>Jump to the first appropriate step:</p>
+ <li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then let <var title="">end</var> be the
+ offset <var title="">subpath width</var> on <var title="">L</var>.
+ Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
- <dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+ <li>
- <dd>
+ <p>Jump to the first appropriate step:</p>
- <p>Do nothing, just continue to the next step.</p>
+ <dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
- </dd>
+ <dd>
+ <p>Do nothing, just continue to the next step.</p>
- <dt>If <var title="">current state</var> is <i>off</i></dt>
+ </dd>
- <dd>
- <p>Cut the line on which <var title="">end</var> finds itself
- short at <var title="">end</var> and place a point there,
- cutting the subpath that it was in in two; remove all line
- segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
- place a single point at <var title="">start</var> with no lines
- connecting to it.</p>
+ <dt>If <var title="">current state</var> is <i>off</i></dt>
- <p>The point has a <i>directionality</i> for the purposes of
- drawing line caps (see below). The directionality is the
- direction that the original line had at that point (i.e. when
- <var title="">L</var> was defined above).</p>
+ <dd>
- </dd>
+ <p>Cut the line on which <var title="">end</var> finds itself
+ short at <var title="">end</var> and place a point there,
+ cutting the subpath that it was in in two; remove all line
+ segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
+ place a single point at <var title="">start</var> with no lines
+ connecting to it.</p>
+ <p>The point has a <i>directionality</i> for the purposes of
+ drawing line caps (see below). The directionality is the
+ direction that the original line had at that point (i.e. when
+ <var title="">L</var> was defined above).</p>
- <dt>Otherwise</dt>
+ </dd>
- <dd>
- <p>Cut the line on which <var title="">start</var> finds itself
- into two at <var title="">start</var> and place a point there,
- cutting the subpath that it was in in two, and similarly cut the
- line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
- that <em>it</em> was in in two, and then remove all line segments,
- joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>
+ <dt>Otherwise</dt>
- <p>If <var title="">start</var> and <var title="">end</var> are
- the same point, then this results in just the line being cut in
- two and two points being inserted there, with nothing being
- removed, unless a join also happens to be at that point, in which
- case the join must be removed.</p>
+ <dd>
- </dd>
+ <p>Cut the line on which <var title="">start</var> finds itself
+ into two at <var title="">start</var> and place a point there,
+ cutting the subpath that it was in in two, and similarly cut the
+ line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
+ that <em>it</em> was in in two, and then remove all line segments,
+ joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>
- </dl></li>
+ <p>If <var title="">start</var> and <var title="">end</var> are
+ the same point, then this results in just the line being cut in
+ two and two points being inserted there, with nothing being
+ removed, unless a join also happens to be at that point, in which
+ case the join must be removed.</p>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
- <i>joins</i>.</li>
+ </dd>
- <li><p>If <var title="">segment length</var> is greater than zero,
- let <var title="">positioned-at-on-dash</var> be false.</li>
+ </dl></li>
- <li><p>Increment <var title="">index</var> by one. If it is equal
- to the number of entries in the <var title="">styles</var>
- <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
- 0.</li>
+ <li><p><i>Post-cut</i>: If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
+ <i>convert</i>.</li>
- <li><p>Return to the step labeled <i>dash on</i>.</li>
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</li>
- <li><p><i>Joins</i>: Remove from <var title="">path</var> any
- subpath that originally formed part of the subpath added in the
- <i>offset subpath</i> step above.</li>
+ <li><p>Increment <var title="">index</var> by one. If it is equal
+ to the number of entries in the <var title="">styles</var>
+ <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
+ 0.</li>
+ <li><p>Return to the step labeled <i>dash on</i>.</li>
+
+ </ol></li>
+
+ <!-- STROKING -->
+
<li>
+ <p><i>Convert</i>: This is the step that converts the path to a new path that represents its
+ stroke.</p>
+
<p>Create a new <a href=#concept-path title=concept-path>path</a> that
describes the edge of the areas that would be covered if a straight line of length equal to the
<var title="">styles</var> <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> was swept
Modified: index
===================================================================
--- index 2013-10-15 22:29:22 UTC (rev 8224)
+++ index 2013-10-15 23:17:54 UTC (rev 8225)
@@ -34420,7 +34420,7 @@
interface is created, the <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>
attribute must initially have the value <code>0.0</code>.</p>
- <hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>,
+ <hr><p>When a user agent is to <dfn id=trace-a-path>trace a <span title=concept-path>path</span></dfn>, <!-- <dfn>trace a path</dfn> -->
given an object <var title="">style</var> that implements the
<code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> interface, it must run the following
algorithm. This algorithm returns a new <a href=#concept-path title=concept-path>path</a>.</p>
@@ -34428,6 +34428,8 @@
<ol><li><p>Let <var title="">path</var> be a copy of the path being
traced.</li>
+ <!-- PATH SANITIZATION -->
+
<li><p>Remove from <var title="">path</var> any subpaths containing
no lines (i.e. subpaths with
just one point).</li>
@@ -34449,138 +34451,148 @@
first line).</p>
<li><p>If the <var title="">styles</var> <a href=#dash-list>dash list</a> is
- empty, jump to the step labeled <i>joins</i>.</li>
+ empty, jump to the step labeled <i>convert</i>.</li>
- <li><p>Let <var title="">width</var> be the aggregate length of all
- the lines of all the subpaths in <var title="">path</var>, in
- coordinate space units.</li>
+ <!-- DASHING -->
- <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
- coordinate space units.</li>
+ <li><p>Let <var title="">pattern width</var> be the concatenation of all the entries of the <var title="">styles</var> <a href=#dash-list>dash list</a>, in coordinate space units.</p>
- <li>
+ <li><p>For each subpath <var title="">subpath</var> in <var title="">path</var>, run the
+ following substeps. These substeps mutate the subpaths in <var title="">path</var> <i>in
+ vivo</i>.</p>
- <p>While <var title="">offset</var> is greater than <var title="">width</var>, decrement it by <var title="">width</var>.</p>
+ <ol><li><p>Let <var title="">subpath width</var> be the length of all the lines of <var title="">subpath</var>, in coordinate space units.</p>
- <p>While <var title="">offset</var> is less than <var title="">width</var>, increment it by <var title="">width</var>.</p>
+ <li><p>Let <var title="">offset</var> be the value of the <var title="">styles</var> <code title=dom-context-2d-lineDashOffset><a href=#dom-context-2d-linedashoffset>lineDashOffset</a></code>, in
+ coordinate space units.</li>
- </li>
+ <li>
+
+ <p>While <var title="">offset</var> is greater than <var title="">pattern width</var>, decrement it by <var title="">pattern width</var>.</p>
+
+ <p>While <var title="">offset</var> is less than <var title="">pattern width</var>, increment it by <var title="">pattern width</var>.</p>
- <li><p><i>Offset subpath</i>: If <var title="">offset</var> is
- non-zero, add a new subpath at the start of <var title="">path</var> consisting of two points connected by a line
- whose length is <var title="">offset</var> coordinate space units.
- (This path is temporary and will be removed in the <i>joins</i>
- step below. Its purpose is to offset the dash pattern.)</p>
+ </li>
- <li><p>Define <var title="">L</var> to be a linear coordinate line
- defined along all lines in all the subpaths in <var title="">path</var>, such that the start of the first line in the
- first subpath is defined as coordinate 0, and the end of the last
- line in the last subpath is defined as coordinate <var title="">width</var>.</li>
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ defined along all lines in <var title="">subpath</var>, such that the start of the first line in the
+ subpath is defined as coordinate 0, and the end of the last
+ line in the subpath is defined as coordinate <var title="">width</var>.</li>
- <li><p>Let <var title="">position</var> be 0.</li>
+ <li><p>Let <var title="">position</var> be zero minus <var title="">offset</var>.</li>
- <li><p>Let <var title="">index</var> be 0.</li>
+ <li><p>Let <var title="">index</var> be 0.</li>
- <li><p>Let <var title="">current state</var> be <i>off</i> (the
- other states being <i>on</i> and <i>zero-on</i>).</li>
+ <li><p>Let <var title="">current state</var> be <i>off</i> (the
+ other states being <i>on</i> and <i>zero-on</i>).</li>
- <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <a href=#dash-list>dash
- list</a>'s <var title="">index</var>th entry.</li>
+ <li><p><i>Dash on</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
- <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
- <i>joins</i>.</li>
+ <li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then end these substeps for this subpath and start them
+ again for the next subpath; if there are no more subpaths, then jump to the step labeled
+ <i>convert</i> instead.</li>
- <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
+ <li><p>If <var title="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</li>
- <li><p>Increment <var title="">index</var> by one.</li>
+ <li><p>Increment <var title="">index</var> by one.</li>
- <li><p><i>Dash Off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <a href=#dash-list>dash
- list</a>'s <var title="">index</var>th entry.</li>
+ <li><p><i>Dash off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <a href=#dash-list>dash
+ list</a>'s <var title="">index</var>th entry.</li>
- <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+ <li><p>Let <var title="">start</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
- <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
+ <li><p>Increment <var title="">position</var> by <var title="">segment length</var>.</li>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then let <var title="">end</var> be the
- offset <var title="">width</var> on <var title="">L</var>.
- Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
+ <li><p>If <var title="">position</var> is less than zero, then jump to the step labeled
+ <i>post-cut</i>.</li> <!-- start and end both before zero -->
- <li>
+ <li><p>If <var title="">start</var> is less than zero, then let <var title="">start</var> be
+ zero.</li> <!-- end will be (at or) after zero -->
- <p>Jump to the first appropriate step:</p>
+ <li><p>If <var title="">position</var> is greater than <var title="">subpath width</var>, then let <var title="">end</var> be the
+ offset <var title="">subpath width</var> on <var title="">L</var>.
+ Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</li>
- <dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+ <li>
- <dd>
+ <p>Jump to the first appropriate step:</p>
- <p>Do nothing, just continue to the next step.</p>
+ <dl class=switch><dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
- </dd>
+ <dd>
+ <p>Do nothing, just continue to the next step.</p>
- <dt>If <var title="">current state</var> is <i>off</i></dt>
+ </dd>
- <dd>
- <p>Cut the line on which <var title="">end</var> finds itself
- short at <var title="">end</var> and place a point there,
- cutting the subpath that it was in in two; remove all line
- segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
- place a single point at <var title="">start</var> with no lines
- connecting to it.</p>
+ <dt>If <var title="">current state</var> is <i>off</i></dt>
- <p>The point has a <i>directionality</i> for the purposes of
- drawing line caps (see below). The directionality is the
- direction that the original line had at that point (i.e. when
- <var title="">L</var> was defined above).</p>
+ <dd>
- </dd>
+ <p>Cut the line on which <var title="">end</var> finds itself
+ short at <var title="">end</var> and place a point there,
+ cutting the subpath that it was in in two; remove all line
+ segments, joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>; and finally
+ place a single point at <var title="">start</var> with no lines
+ connecting to it.</p>
+ <p>The point has a <i>directionality</i> for the purposes of
+ drawing line caps (see below). The directionality is the
+ direction that the original line had at that point (i.e. when
+ <var title="">L</var> was defined above).</p>
- <dt>Otherwise</dt>
+ </dd>
- <dd>
- <p>Cut the line on which <var title="">start</var> finds itself
- into two at <var title="">start</var> and place a point there,
- cutting the subpath that it was in in two, and similarly cut the
- line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
- that <em>it</em> was in in two, and then remove all line segments,
- joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>
+ <dt>Otherwise</dt>
- <p>If <var title="">start</var> and <var title="">end</var> are
- the same point, then this results in just the line being cut in
- two and two points being inserted there, with nothing being
- removed, unless a join also happens to be at that point, in which
- case the join must be removed.</p>
+ <dd>
- </dd>
+ <p>Cut the line on which <var title="">start</var> finds itself
+ into two at <var title="">start</var> and place a point there,
+ cutting the subpath that it was in in two, and similarly cut the
+ line on which <var title="">end</var> finds itself short at <var title="">end</var> and place a point there, cutting the subpath
+ that <em>it</em> was in in two, and then remove all line segments,
+ joins, points, and subpaths that are between <var title="">start</var> and <var title="">end</var>.</p>
- </dl></li>
+ <p>If <var title="">start</var> and <var title="">end</var> are
+ the same point, then this results in just the line being cut in
+ two and two points being inserted there, with nothing being
+ removed, unless a join also happens to be at that point, in which
+ case the join must be removed.</p>
- <li><p>If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
- <i>joins</i>.</li>
+ </dd>
- <li><p>If <var title="">segment length</var> is greater than zero,
- let <var title="">positioned-at-on-dash</var> be false.</li>
+ </dl></li>
- <li><p>Increment <var title="">index</var> by one. If it is equal
- to the number of entries in the <var title="">styles</var>
- <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
- 0.</li>
+ <li><p><i>Post-cut</i>: If <var title="">position</var> is greater than <var title="">width</var>, then jump to the step labeled
+ <i>convert</i>.</li>
- <li><p>Return to the step labeled <i>dash on</i>.</li>
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</li>
- <li><p><i>Joins</i>: Remove from <var title="">path</var> any
- subpath that originally formed part of the subpath added in the
- <i>offset subpath</i> step above.</li>
+ <li><p>Increment <var title="">index</var> by one. If it is equal
+ to the number of entries in the <var title="">styles</var>
+ <a href=#dash-list>dash list</a>, then let <var title="">index</var> be
+ 0.</li>
+ <li><p>Return to the step labeled <i>dash on</i>.</li>
+
+ </ol></li>
+
+ <!-- STROKING -->
+
<li>
+ <p><i>Convert</i>: This is the step that converts the path to a new path that represents its
+ stroke.</p>
+
<p>Create a new <a href=#concept-path title=concept-path>path</a> that
describes the edge of the areas that would be covered if a straight line of length equal to the
<var title="">styles</var> <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> was swept
Modified: source
===================================================================
--- source 2013-10-15 22:29:22 UTC (rev 8224)
+++ source 2013-10-15 23:17:54 UTC (rev 8225)
@@ -37254,7 +37254,7 @@
<hr>
- <p>When a user agent is to <dfn>trace a <span title="concept-path">path</span></dfn>,
+ <p>When a user agent is to <dfn>trace a <span title="concept-path">path</span></dfn>, <!-- <dfn>trace a path</dfn> -->
given an object <var title="">style</var> that implements the
<code>CanvasDrawingStyles</code> interface, it must run the following
algorithm. This algorithm returns a new <span title="concept-path">path</span>.</p>
@@ -37264,6 +37264,8 @@
<li><p>Let <var title="">path</var> be a copy of the path being
traced.</p></li>
+ <!-- PATH SANITIZATION -->
+
<li><p>Remove from <var title="">path</var> any subpaths containing
no lines (i.e. subpaths with
just one point).</p></li>
@@ -37287,162 +37289,177 @@
first line).</p>
<li><p>If the <var title="">styles</var> <span>dash list</span> is
- empty, jump to the step labeled <i>joins</i>.</p></li>
+ empty, jump to the step labeled <i>convert</i>.</p></li>
- <li><p>Let <var title="">width</var> be the aggregate length of all
- the lines of all the subpaths in <var title="">path</var>, in
- coordinate space units.</p></li>
+ <!-- DASHING -->
- <li><p>Let <var title="">offset</var> be the value of the <var
- title="">styles</var> <code
- title="dom-context-2d-lineDashOffset">lineDashOffset</code>, in
- coordinate space units.</p></li>
+ <li><p>Let <var title="">pattern width</var> be the concatenation of all the entries of the <var
+ title="">styles</var> <span>dash list</span>, in coordinate space units.</p>
- <li>
+ <li><p>For each subpath <var title="">subpath</var> in <var title="">path</var>, run the
+ following substeps. These substeps mutate the subpaths in <var title="">path</var> <i>in
+ vivo</i>.</p>
- <p>While <var title="">offset</var> is greater than <var
- title="">width</var>, decrement it by <var
- title="">width</var>.</p>
+ <ol>
- <p>While <var title="">offset</var> is less than <var
- title="">width</var>, increment it by <var
- title="">width</var>.</p>
+ <li><p>Let <var title="">subpath width</var> be the length of all the lines of <var
+ title="">subpath</var>, in coordinate space units.</p>
- </li>
+ <li><p>Let <var title="">offset</var> be the value of the <var
+ title="">styles</var> <code
+ title="dom-context-2d-lineDashOffset">lineDashOffset</code>, in
+ coordinate space units.</p></li>
- <li><p><i>Offset subpath</i>: If <var title="">offset</var> is
- non-zero, add a new subpath at the start of <var
- title="">path</var> consisting of two points connected by a line
- whose length is <var title="">offset</var> coordinate space units.
- (This path is temporary and will be removed in the <i>joins</i>
- step below. Its purpose is to offset the dash pattern.)</p>
+ <li>
+
+ <p>While <var title="">offset</var> is greater than <var
+ title="">pattern width</var>, decrement it by <var
+ title="">pattern width</var>.</p>
+
+ <p>While <var title="">offset</var> is less than <var
+ title="">pattern width</var>, increment it by <var
+ title="">pattern width</var>.</p>
- <li><p>Define <var title="">L</var> to be a linear coordinate line
- defined along all lines in all the subpaths in <var
- title="">path</var>, such that the start of the first line in the
- first subpath is defined as coordinate 0, and the end of the last
- line in the last subpath is defined as coordinate <var
- title="">width</var>.</p></li>
+ </li>
- <li><p>Let <var title="">position</var> be 0.</p></li>
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ defined along all lines in <var
+ title="">subpath</var>, such that the start of the first line in the
+ subpath is defined as coordinate 0, and the end of the last
+ line in the subpath is defined as coordinate <var
+ title="">width</var>.</p></li>
- <li><p>Let <var title="">index</var> be 0.</p></li>
+ <li><p>Let <var title="">position</var> be zero minus <var title="">offset</var>.</p></li>
- <li><p>Let <var title="">current state</var> be <i>off</i> (the
- other states being <i>on</i> and <i>zero-on</i>).</p></li>
+ <li><p>Let <var title="">index</var> be 0.</p></li>
- <li><p><i>Dash On</i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <span>dash
- list</span>'s <var title="">index</var>th entry.</p></li>
+ <li><p>Let <var title="">current state</var> be <i>off</i> (the
+ other states being <i>on</i> and <i>zero-on</i>).</p></li>
- <li><p>Increment <var title="">position</var> by <var
- title="">segment length</var>.</p></li>
+ <li><p><i>Dash on</i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <span>dash
+ list</span>'s <var title="">index</var>th entry.</p></li>
- <li><p>If <var title="">position</var> is greater than <var
- title="">width</var>, then jump to the step labeled
- <i>joins</i>.</p></li>
+ <li><p>Increment <var title="">position</var> by <var
+ title="">segment length</var>.</p></li>
- <li><p>If <var title="">segment length</var> is non-zero, let <var
- title="">current state</var> be <i>on</i>.</p></li>
+ <li><p>If <var title="">position</var> is greater than <var
+ title="">subpath width</var>, then end these substeps for this subpath and start them
+ again for the next subpath; if there are no more subpaths, then jump to the step labeled
+ <i>convert</i> instead.</p></li>
- <li><p>Increment <var title="">index</var> by one.</p></li>
+ <li><p>If <var title="">segment length</var> is non-zero, let <var
+ title="">current state</var> be <i>on</i>.</p></li>
- <li><p><i>Dash Off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
- the value of the <var title="">styles</var> <span>dash
- list</span>'s <var title="">index</var>th entry.</p></li>
+ <li><p>Increment <var title="">index</var> by one.</p></li>
- <li><p>Let <var title="">start</var> be the offset <var
- title="">position</var> on <var title="">L</var>.</p></li>
+ <li><p><i>Dash off<!-- labeled for consistency only --></i>: Let <var title="">segment length</var> be
+ the value of the <var title="">styles</var> <span>dash
+ list</span>'s <var title="">index</var>th entry.</p></li>
- <li><p>Increment <var title="">position</var> by <var
- title="">segment length</var>.</p></li>
+ <li><p>Let <var title="">start</var> be the offset <var
+ title="">position</var> on <var title="">L</var>.</p></li>
- <li><p>If <var title="">position</var> is greater than <var
- title="">width</var>, then let <var title="">end</var> be the
- offset <var title="">width</var> on <var title="">L</var>.
- Otherwise, let <var title="">end</var> be the offset <var
- title="">position</var> on <var title="">L</var>.</p></li>
+ <li><p>Increment <var title="">position</var> by <var
+ title="">segment length</var>.</p></li>
- <li>
+ <li><p>If <var title="">position</var> is less than zero, then jump to the step labeled
+ <i>post-cut</i>.</p></li> <!-- start and end both before zero -->
- <p>Jump to the first appropriate step:</p>
+ <li><p>If <var title="">start</var> is less than zero, then let <var title="">start</var> be
+ zero.</p></li> <!-- end will be (at or) after zero -->
- <dl class="switch">
+ <li><p>If <var title="">position</var> is greater than <var
+ title="">subpath width</var>, then let <var title="">end</var> be the
+ offset <var title="">subpath width</var> on <var title="">L</var>.
+ Otherwise, let <var title="">end</var> be the offset <var
+ title="">position</var> on <var title="">L</var>.</p></li>
- <dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+ <li>
- <dd>
+ <p>Jump to the first appropriate step:</p>
- <p>Do nothing, just continue to the next step.</p>
+ <dl class="switch">
- </dd>
+ <dt>If <var title="">segment length</var> is zero and <var title="">current state</var> is <i>off</i></dt>
+ <dd>
- <dt>If <var title="">current state</var> is <i>off</i></dt>
+ <p>Do nothing, just continue to the next step.</p>
- <dd>
+ </dd>
- <p>Cut the line on which <var title="">end</var> finds itself
- short at <var title="">end</var> and place a point there,
- cutting the subpath that it was in in two; remove all line
- segments, joins, points, and subpaths that are between <var
- title="">start</var> and <var title="">end</var>; and finally
- place a single point at <var title="">start</var> with no lines
- connecting to it.</p>
- <p>The point has a <i>directionality</i> for the purposes of
- drawing line caps (see below). The directionality is the
- direction that the original line had at that point (i.e. when
- <var title="">L</var> was defined above).</p>
+ <dt>If <var title="">current state</var> is <i>off</i></dt>
- </dd>
+ <dd>
+ <p>Cut the line on which <var title="">end</var> finds itself
+ short at <var title="">end</var> and place a point there,
+ cutting the subpath that it was in in two; remove all line
+ segments, joins, points, and subpaths that are between <var
+ title="">start</var> and <var title="">end</var>; and finally
+ place a single point at <var title="">start</var> with no lines
+ connecting to it.</p>
- <dt>Otherwise</dt>
+ <p>The point has a <i>directionality</i> for the purposes of
+ drawing line caps (see below). The directionality is the
+ direction that the original line had at that point (i.e. when
+ <var title="">L</var> was defined above).</p>
- <dd>
+ </dd>
- <p>Cut the line on which <var title="">start</var> finds itself
- into two at <var title="">start</var> and place a point there,
- cutting the subpath that it was in in two, and similarly cut the
- line on which <var title="">end</var> finds itself short at <var
- title="">end</var> and place a point there, cutting the subpath
- that <em>it</em> was in in two, and then remove all line segments,
- joins, points, and subpaths that are between <var
- title="">start</var> and <var title="">end</var>.</p>
- <p>If <var title="">start</var> and <var title="">end</var> are
- the same point, then this results in just the line being cut in
- two and two points being inserted there, with nothing being
- removed, unless a join also happens to be at that point, in which
- case the join must be removed.</p>
+ <dt>Otherwise</dt>
- </dd>
+ <dd>
- </dl>
+ <p>Cut the line on which <var title="">start</var> finds itself
+ into two at <var title="">start</var> and place a point there,
+ cutting the subpath that it was in in two, and similarly cut the
+ line on which <var title="">end</var> finds itself short at <var
+ title="">end</var> and place a point there, cutting the subpath
+ that <em>it</em> was in in two, and then remove all line segments,
+ joins, points, and subpaths that are between <var
+ title="">start</var> and <var title="">end</var>.</p>
- </li>
+ <p>If <var title="">start</var> and <var title="">end</var> are
+ the same point, then this results in just the line being cut in
+ two and two points being inserted there, with nothing being
+ removed, unless a join also happens to be at that point, in which
+ case the join must be removed.</p>
- <li><p>If <var title="">position</var> is greater than <var
- title="">width</var>, then jump to the step labeled
- <i>joins</i>.</p></li>
+ </dd>
- <li><p>If <var title="">segment length</var> is greater than zero,
- let <var title="">positioned-at-on-dash</var> be false.</p></li>
+ </dl>
- <li><p>Increment <var title="">index</var> by one. If it is equal
- to the number of entries in the <var title="">styles</var>
- <span>dash list</span>, then let <var title="">index</var> be
- 0.</p></li>
+ </li>
- <li><p>Return to the step labeled <i>dash on</i>.</p></li>
+ <li><p><i>Post-cut</i>: If <var title="">position</var> is greater than <var
+ title="">width</var>, then jump to the step labeled
+ <i>convert</i>.</p></li>
- <li><p><i>Joins</i>: Remove from <var title="">path</var> any
- subpath that originally formed part of the subpath added in the
- <i>offset subpath</i> step above.</p></li>
+ <li><p>If <var title="">segment length</var> is greater than zero,
+ let <var title="">positioned-at-on-dash</var> be false.</p></li>
+ <li><p>Increment <var title="">index</var> by one. If it is equal
+ to the number of entries in the <var title="">styles</var>
+ <span>dash list</span>, then let <var title="">index</var> be
+ 0.</p></li>
+
+ <li><p>Return to the step labeled <i>dash on</i>.</p></li>
+
+ </ol>
+
+ </li>
+
+ <!-- STROKING -->
+
<li>
+ <p><i>Convert</i>: This is the step that converts the path to a new path that represents its
+ stroke.</p>
+
<p>Create a new <span title="concept-path">path</span> that
describes the edge of the areas that would be covered if a straight line of length equal to the
<var title="">styles</var> <code title="dom-context-2d-lineWidth">lineWidth</code> was swept
More information about the Commit-Watchers
mailing list