[html5] r8538 - / images

whatwg at whatwg.org whatwg at whatwg.org
Wed Mar 12 15:01:05 PDT 2014


Author: ianh
Date: 2014-03-12 15:01:04 -0700 (Wed, 12 Mar 2014)
New Revision: 8538

Added:
   images/Qp-overlap-outline.png
   images/Qp-overlap.png
Modified:
   complete.html
   index
   source
Log:
[giow] (0) Make the addText() methods on Path not create overlapping subpaths.
Affected topics: Canvas

Modified: complete.html
===================================================================
--- complete.html	2014-03-10 21:00:43 UTC (rev 8537)
+++ complete.html	2014-03-12 22:01:04 UTC (rev 8538)
@@ -298,7 +298,7 @@
 
   <header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 10 March 2014</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 12 March 2014</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>
@@ -56740,23 +56740,76 @@
    <li><p>Move all the shapes in <var title="">glyphs</var> to the right by <var title="">x</var>
    CSS pixels and down by <var title="">y</var> CSS pixels.</li>
 
-   <li><p>Let <var title="">glyph subpaths</var> be a <a href=#concept-path title=concept-path>path</a> describing the shapes given
-   in <var title="">glyphs</var>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit in <var title="">glyph subpaths</var>.
-   Subpaths in <var title="">glyph subpaths</var> must wind clockwise, regardless of how the user
+<!--CLEANUP-->
+   <li><p>Let <var title="">glyph paths</var> be a list of <a href=#concept-path title=concept-path>paths</a> describing the shapes given
+   in <var title="">glyphs</var>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit in <var title="">glyph paths</var>.
+   Subpaths in <var title="">glyph paths</var> must wind clockwise, regardless of how the user
    agent's font subsystem renders fonts and regardless of how the fonts themselves are defined.</p>
 
-   <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the
+   <li><p>Transform all the coordinates and lines in <var title="">glyph paths</var> by the
    transformation matrix <var title="">transform</var>, if it is not null.</li>
 
-   <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for the
+<!--CLEANUP-->
+   <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph paths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> each <a href=#concept-path title=concept-path>path</a> in <var title="">glyph paths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for the
    line styles.</p>
 
-   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">glyph
-   subpaths</var>.</li>
+   <li id=mergeGlyphs>
 
-   <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to the <code><a href=#path>Path</a></code>
+    <p>Let <var title="">merged path</var> be a <a href=#concept-path title=concept-path>path</a> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <a href=#concept-path title=concept-path>paths</a> in <var title="">glyph paths</var>, the number
+    of times a half-infinite straight line drawn from that point crosses that path is even.</p>
+
+    <p>The subpaths in <var title="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <div class=example>
+
+     <p>For example, suppose <var title="">text</var> consists of two overlapping glyphs "Q" and
+     "p" (maybe the "Q" has a flourish that crosses into the tail of the "p"). The <var title="">glyph paths</var> therefore consist of two paths, each with two subpaths: one for the
+     outside of the letter shape, and one for the inside of the letter shape. There are points that,
+     according to the even-odd fill rule, are filled in both shapes simultaneously: where they
+     overlap. As such, the subpaths from the two glyphs actually cross each other.</p>
+
+     <p><img src=http://images.whatwg.org/Qp-overlap.png alt=""></p> <!-- this image repeats the previous paragraph,
+     so alternative text would be redundant -->
+     <!--
+          c.clearRect(0, 0, 640, 480);
+          c.save();
+          try {
+            c.font = '100px Zapfino';
+            c.fillStyle = 'blue';
+            c.fillText('Q', 200, 200);
+            c.fillStyle = 'fuchsia';
+            c.fillText('p', 337, 200);
+          } finally {
+            c.restore();
+          }
+     -->
+
+     <p>The resulting <var title="">merged path</var> in such a situation would have just one path
+     for these two letters, with a total of just three subpaths (one big outer outline, one for the
+     inside of the "Q", and one for inside of the "p"). This single path would have no subpaths that
+     cross each other.</p>
+
+     <p><img src=http://images.whatwg.org/Qp-overlap-outline.png alt=""></p> <!-- this image again repeats the
+     previous paragraph, so alternative text would be redundant -->
+     <!-- this is just an edge-detected version of the previous image -->
+
+    </div>
+
+   </li>
+
+<!--CLEANUP-->
+   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">merged path</var>.</li>
+
+   <li><p>Add all the subpaths in <var title="">merged path</var> to the <code><a href=#path>Path</a></code>
    object.</li>
 
+<!--CLEANUP-->
    <li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
    the subpath.</li>
 
@@ -56797,6 +56850,8 @@
 
    <li><p>Move all the shapes in <var title="">glyphs</var> to the right by <var title="">offset</var> CSS pixels.</li>
 
+   <li><p>Let <var title="">transformed path list</var> be an empty list of paths.</li>
+
    <li>
 
     <p>For each glyph <var title="">glyph</var> in the <var title="">glyphs</var> array, run these
@@ -56839,14 +56894,37 @@
      <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for
      the line styles.</p>
 
-     <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">glyph
-     subpaths</var>. (This coordinate is only used if this is the last glyph processed.)</li>
+     <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to <var title="">transformed path list</var>.</li>
 
-     <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to <var title="">target</var>.</li>
-
     </ol></li>
 
-   <li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
+   <li>
+
+    <p>Let <var title="">merged path</var> be a <a href=#concept-path title=concept-path>path</a> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <a href=#concept-path title=concept-path>paths</a> in <var title="">transformed path list</var>,
+    the number of times a half-infinite straight line drawn from that point crosses that path is
+    even.</p>
+
+    <p>The subpaths in <var title="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <p class=note>See <a href=#mergeGlyphs>the equivalent step in the earlier algorithm</a> for
+    an example of this step. It's even more likely that there will be overlap with this method,
+    since neighboring glyphs are likely to be rotated relative to each other.</p>
+
+   </li>
+
+   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">merged
+   path</var>.</li>
+
+   <li><p>Add all the subpaths in <var title="">merged path</var> to <var title="">target</var>.</li>
+
+<!--CLEANUP-->
+   <li><p>Create a new subpath in <var title="">target</var> with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
    the subpath.</li>
 
   </ol></div>

Added: images/Qp-overlap-outline.png
===================================================================
(Binary files differ)


Property changes on: images/Qp-overlap-outline.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: images/Qp-overlap.png
===================================================================
(Binary files differ)


Property changes on: images/Qp-overlap.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: index
===================================================================
--- index	2014-03-10 21:00:43 UTC (rev 8537)
+++ index	2014-03-12 22:01:04 UTC (rev 8538)
@@ -298,7 +298,7 @@
 
   <header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 10 March 2014</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 12 March 2014</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>
@@ -56740,23 +56740,76 @@
    <li><p>Move all the shapes in <var title="">glyphs</var> to the right by <var title="">x</var>
    CSS pixels and down by <var title="">y</var> CSS pixels.</li>
 
-   <li><p>Let <var title="">glyph subpaths</var> be a <a href=#concept-path title=concept-path>path</a> describing the shapes given
-   in <var title="">glyphs</var>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit in <var title="">glyph subpaths</var>.
-   Subpaths in <var title="">glyph subpaths</var> must wind clockwise, regardless of how the user
+<!--CLEANUP-->
+   <li><p>Let <var title="">glyph paths</var> be a list of <a href=#concept-path title=concept-path>paths</a> describing the shapes given
+   in <var title="">glyphs</var>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit in <var title="">glyph paths</var>.
+   Subpaths in <var title="">glyph paths</var> must wind clockwise, regardless of how the user
    agent's font subsystem renders fonts and regardless of how the fonts themselves are defined.</p>
 
-   <li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the
+   <li><p>Transform all the coordinates and lines in <var title="">glyph paths</var> by the
    transformation matrix <var title="">transform</var>, if it is not null.</li>
 
-   <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for the
+<!--CLEANUP-->
+   <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph paths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> each <a href=#concept-path title=concept-path>path</a> in <var title="">glyph paths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for the
    line styles.</p>
 
-   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">glyph
-   subpaths</var>.</li>
+   <li id=mergeGlyphs>
 
-   <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to the <code><a href=#path>Path</a></code>
+    <p>Let <var title="">merged path</var> be a <a href=#concept-path title=concept-path>path</a> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <a href=#concept-path title=concept-path>paths</a> in <var title="">glyph paths</var>, the number
+    of times a half-infinite straight line drawn from that point crosses that path is even.</p>
+
+    <p>The subpaths in <var title="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <div class=example>
+
+     <p>For example, suppose <var title="">text</var> consists of two overlapping glyphs "Q" and
+     "p" (maybe the "Q" has a flourish that crosses into the tail of the "p"). The <var title="">glyph paths</var> therefore consist of two paths, each with two subpaths: one for the
+     outside of the letter shape, and one for the inside of the letter shape. There are points that,
+     according to the even-odd fill rule, are filled in both shapes simultaneously: where they
+     overlap. As such, the subpaths from the two glyphs actually cross each other.</p>
+
+     <p><img src=http://images.whatwg.org/Qp-overlap.png alt=""></p> <!-- this image repeats the previous paragraph,
+     so alternative text would be redundant -->
+     <!--
+          c.clearRect(0, 0, 640, 480);
+          c.save();
+          try {
+            c.font = '100px Zapfino';
+            c.fillStyle = 'blue';
+            c.fillText('Q', 200, 200);
+            c.fillStyle = 'fuchsia';
+            c.fillText('p', 337, 200);
+          } finally {
+            c.restore();
+          }
+     -->
+
+     <p>The resulting <var title="">merged path</var> in such a situation would have just one path
+     for these two letters, with a total of just three subpaths (one big outer outline, one for the
+     inside of the "Q", and one for inside of the "p"). This single path would have no subpaths that
+     cross each other.</p>
+
+     <p><img src=http://images.whatwg.org/Qp-overlap-outline.png alt=""></p> <!-- this image again repeats the
+     previous paragraph, so alternative text would be redundant -->
+     <!-- this is just an edge-detected version of the previous image -->
+
+    </div>
+
+   </li>
+
+<!--CLEANUP-->
+   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">merged path</var>.</li>
+
+   <li><p>Add all the subpaths in <var title="">merged path</var> to the <code><a href=#path>Path</a></code>
    object.</li>
 
+<!--CLEANUP-->
    <li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
    the subpath.</li>
 
@@ -56797,6 +56850,8 @@
 
    <li><p>Move all the shapes in <var title="">glyphs</var> to the right by <var title="">offset</var> CSS pixels.</li>
 
+   <li><p>Let <var title="">transformed path list</var> be an empty list of paths.</li>
+
    <li>
 
     <p>For each glyph <var title="">glyph</var> in the <var title="">glyphs</var> array, run these
@@ -56839,14 +56894,37 @@
      <li><p>If the method is <code title=dom-path-addPathByStrokingText><a href=#dom-path-addpathbystrokingtext>addPathByStrokingText()</a></code>, replace <var title="">glyph subpaths</var> by the result of <a href=#trace-a-path title="trace a path">tracing</a> <var title="">glyph subpaths</var>, using the <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object argument for
      the line styles.</p>
 
-     <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">glyph
-     subpaths</var>. (This coordinate is only used if this is the last glyph processed.)</li>
+     <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to <var title="">transformed path list</var>.</li>
 
-     <li><p>Add all the subpaths in <var title="">glyph subpaths</var> to <var title="">target</var>.</li>
-
     </ol></li>
 
-   <li><p>Create a new subpath in the <code><a href=#path>Path</a></code> object with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
+   <li>
+
+    <p>Let <var title="">merged path</var> be a <a href=#concept-path title=concept-path>path</a> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <a href=#concept-path title=concept-path>paths</a> in <var title="">transformed path list</var>,
+    the number of times a half-infinite straight line drawn from that point crosses that path is
+    even.</p>
+
+    <p>The subpaths in <var title="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <p class=note>See <a href=#mergeGlyphs>the equivalent step in the earlier algorithm</a> for
+    an example of this step. It's even more likely that there will be overlap with this method,
+    since neighboring glyphs are likely to be rotated relative to each other.</p>
+
+   </li>
+
+   <li><p>Let (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) be the last point in the last subpath of <var title="">merged
+   path</var>.</li>
+
+   <li><p>Add all the subpaths in <var title="">merged path</var> to <var title="">target</var>.</li>
+
+<!--CLEANUP-->
+   <li><p>Create a new subpath in <var title="">target</var> with (<var title="">x<sub title="">final</sub></var>, <var title="">y<sub title="">final</sub></var>) as the only point in
    the subpath.</li>
 
   </ol></div>

Modified: source
===================================================================
--- source	2014-03-10 21:00:43 UTC (rev 8537)
+++ source	2014-03-12 22:01:04 UTC (rev 8538)
@@ -62984,28 +62984,82 @@
    <li><p>Move all the shapes in <var data-x="">glyphs</var> to the right by <var data-x="">x</var>
    CSS pixels and down by <var data-x="">y</var> CSS pixels.</p></li>
 
-   <li><p>Let <var data-x="">glyph subpaths</var> be a <span data-x="concept-path">path</span> describing the shapes given
+<!--CLEANUP-->
+   <li><p>Let <var data-x="">glyph paths</var> be a list of <span data-x="concept-path">paths</span> describing the shapes given
    in <var data-x="">glyphs</var>, with each CSS pixel in the coordinate space of <var
-   data-x="">glyphs</var> mapped to one coordinate space unit in <var data-x="">glyph subpaths</var>.
-   Subpaths in <var data-x="">glyph subpaths</var> must wind clockwise, regardless of how the user
+   data-x="">glyphs</var> mapped to one coordinate space unit in <var data-x="">glyph paths</var>.
+   Subpaths in <var data-x="">glyph paths</var> must wind clockwise, regardless of how the user
    agent's font subsystem renders fonts and regardless of how the fonts themselves are defined.</p>
 
-   <li><p>Transform all the coordinates and lines in <var data-x="">glyph subpaths</var> by the
+   <li><p>Transform all the coordinates and lines in <var data-x="">glyph paths</var> by the
    transformation matrix <var data-x="">transform</var>, if it is not null.</p></li>
 
+<!--CLEANUP-->
    <li><p>If the method is <code
    data-x="dom-path-addPathByStrokingText">addPathByStrokingText()</code>, replace <var
-   data-x="">glyph subpaths</var> by the result of <span data-x="trace a path">tracing</span> <var
-   data-x="">glyph subpaths</var>, using the <code>CanvasDrawingStyles</code> object argument for the
+   data-x="">glyph paths</var> by the result of <span data-x="trace a path">tracing</span> each <span data-x="concept-path">path</span> in <var
+   data-x="">glyph paths</var>, using the <code>CanvasDrawingStyles</code> object argument for the
    line styles.</p>
 
+   <li id="mergeGlyphs">
+
+    <p>Let <var data-x="">merged path</var> be a <span data-x="concept-path">path</span> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <span data-x="concept-path">paths</span> in <var data-x="">glyph paths</var>, the number
+    of times a half-infinite straight line drawn from that point crosses that path is even.</p>
+
+    <p>The subpaths in <var data-x="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <div class="example">
+
+     <p>For example, suppose <var data-x="">text</var> consists of two overlapping glyphs "Q" and
+     "p" (maybe the "Q" has a flourish that crosses into the tail of the "p"). The <var
+     data-x="">glyph paths</var> therefore consist of two paths, each with two subpaths: one for the
+     outside of the letter shape, and one for the inside of the letter shape. There are points that,
+     according to the even-odd fill rule, are filled in both shapes simultaneously: where they
+     overlap. As such, the subpaths from the two glyphs actually cross each other.</p>
+
+     <p><img src="images/Qp-overlap.png" alt=""></p> <!-- this image repeats the previous paragraph,
+     so alternative text would be redundant -->
+     <!--
+          c.clearRect(0, 0, 640, 480);
+          c.save();
+          try {
+            c.font = '100px Zapfino';
+            c.fillStyle = 'blue';
+            c.fillText('Q', 200, 200);
+            c.fillStyle = 'fuchsia';
+            c.fillText('p', 337, 200);
+          } finally {
+            c.restore();
+          }
+     -->
+
+     <p>The resulting <var data-x="">merged path</var> in such a situation would have just one path
+     for these two letters, with a total of just three subpaths (one big outer outline, one for the
+     inside of the "Q", and one for inside of the "p"). This single path would have no subpaths that
+     cross each other.</p>
+
+     <p><img src="images/Qp-overlap-outline.png" alt=""></p> <!-- this image again repeats the
+     previous paragraph, so alternative text would be redundant -->
+     <!-- this is just an edge-detected version of the previous image -->
+
+    </div>
+
+   </li>
+
+<!--CLEANUP-->
    <li><p>Let (<var data-x="">x<sub data-x="">final</sub></var>, <var data-x="">y<sub
-   data-x="">final</sub></var>) be the last point in the last subpath of <var data-x="">glyph
-   subpaths</var>.</p></li>
+   data-x="">final</sub></var>) be the last point in the last subpath of <var data-x="">merged path</var>.</p></li>
 
-   <li><p>Add all the subpaths in <var data-x="">glyph subpaths</var> to the <code>Path</code>
+   <li><p>Add all the subpaths in <var data-x="">merged path</var> to the <code>Path</code>
    object.</p></li>
 
+<!--CLEANUP-->
    <li><p>Create a new subpath in the <code>Path</code> object with (<var data-x="">x<sub
    data-x="">final</sub></var>, <var data-x="">y<sub data-x="">final</sub></var>) as the only point in
    the subpath.</p></li>
@@ -63062,6 +63116,8 @@
    <li><p>Move all the shapes in <var data-x="">glyphs</var> to the right by <var
    data-x="">offset</var> CSS pixels.</p></li>
 
+   <li><p>Let <var data-x="">transformed path list</var> be an empty list of paths.</p></li>
+
    <li>
 
     <p>For each glyph <var data-x="">glyph</var> in the <var data-x="">glyphs</var> array, run these
@@ -63115,18 +63171,42 @@
      data-x="">glyph subpaths</var>, using the <code>CanvasDrawingStyles</code> object argument for
      the line styles.</p>
 
-     <li><p>Let (<var data-x="">x<sub data-x="">final</sub></var>, <var data-x="">y<sub
-     data-x="">final</sub></var>) be the last point in the last subpath of <var data-x="">glyph
-     subpaths</var>. (This coordinate is only used if this is the last glyph processed.)</p></li>
-
      <li><p>Add all the subpaths in <var data-x="">glyph subpaths</var> to <var
-     data-x="">target</var>.</p></li>
+     data-x="">transformed path list</var>.</p></li>
 
     </ol>
 
    </li>
 
-   <li><p>Create a new subpath in the <code>Path</code> object with (<var data-x="">x<sub
+   <li>
+
+    <p>Let <var data-x="">merged path</var> be a <span data-x="concept-path">path</span> that
+    consists of a set of non-overlapping subpaths that exactly outline the points from which, in any
+    of the <span data-x="concept-path">paths</span> in <var data-x="">transformed path list</var>,
+    the number of times a half-infinite straight line drawn from that point crosses that path is
+    even.</p>
+
+    <p>The subpaths in <var data-x="">merged path</var> must be oriented such that for any point in
+    the path, the number of times a half-infinite straight line drawn from that point crosses a
+    subpath is even if and only if number of times a half-infinite straight line drawn from that
+    same point crosses a subpath going in one direction is equal to the number of times it crosses a
+    subpath going in the other direction.</p>
+
+    <p class="note">See <a href="#mergeGlyphs">the equivalent step in the earlier algorithm</a> for
+    an example of this step. It's even more likely that there will be overlap with this method,
+    since neighboring glyphs are likely to be rotated relative to each other.</p>
+
+   </li>
+
+   <li><p>Let (<var data-x="">x<sub data-x="">final</sub></var>, <var data-x="">y<sub
+   data-x="">final</sub></var>) be the last point in the last subpath of <var data-x="">merged
+   path</var>.</p></li>
+
+   <li><p>Add all the subpaths in <var data-x="">merged path</var> to <var
+   data-x="">target</var>.</p></li>
+
+<!--CLEANUP-->
+   <li><p>Create a new subpath in <var data-x="">target</var> with (<var data-x="">x<sub
    data-x="">final</sub></var>, <var data-x="">y<sub data-x="">final</sub></var>) as the only point in
    the subpath.</p></li>
 




More information about the Commit-Watchers mailing list