- From: Sam Ruby via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 18 Oct 2012 21:43:14 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/2dcontext
In directory hutz:/tmp/cvs-serv14361
Modified Files:
Overview.html
Log Message:
commit 27b3f4cbd9f54671ec68161ab328cf5451aa516b
Author: Jay Munro <jaymunro@microsoft.com>
Date: Thu Oct 18 14:37:59 2012 -0700
Put back features that are included in issue-201
put back features removed per issue-201
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.185
retrieving revision 1.186
diff -u -d -r1.185 -r1.186
--- Overview.html 18 Oct 2012 21:13:34 -0000 1.185
+++ Overview.html 18 Oct 2012 21:43:12 -0000 1.186
@@ -733,12 +733,12 @@
attribute DOMString <a href="#dom-context-2d-linecap" title="dom-context-2d-lineCap">lineCap</a>; // "butt", "round", "square" (default "butt")
attribute DOMString <a href="#dom-context-2d-linejoin" title="dom-context-2d-lineJoin">lineJoin</a>; // "round", "bevel", "miter" (default "miter")
attribute unrestricted double <a href="#dom-context-2d-miterlimit" title="dom-context-2d-miterLimit">miterLimit</a>; // (default 10)
-<!-- per Frank Oliver, issue 201 --> <!--
+
// dashed lines
- void <span title="dom-context-2d-setLineDash">setLineDash</span>(sequence<unrestricted double> segments); // default empty
- sequence<unrestricted double> <span title="dom-context-2d-getLineDash">getLineDash</span>();
- attribute unrestricted double <span title="dom-context-2d-lineDashOffset">lineDashOffset</span>;
--->
+ void <a href="#dom-context-2d-setlinedash" title="dom-context-2d-setLineDash">setLineDash</a>(sequence<unrestricted double> segments); // default empty
+ sequence<unrestricted double> <a href="#dom-context-2d-getlinedash" title="dom-context-2d-getLineDash">getLineDash</a>();
+ attribute unrestricted double <a href="#dom-context-2d-linedashoffset" title="dom-context-2d-lineDashOffset">lineDashOffset</a>;
+
// text
attribute DOMString <a href="#dom-context-2d-font" title="dom-context-2d-font">font</a>; // (default 10px sans-serif)
@@ -777,8 +777,8 @@
<!-- <span>SVGMatrix</span>? <span title="dom-HitRegionOptions-transform">transform</span> = null;
--> <span>DOMString</span> <span title="dom-HitRegionOptions-id">id</span> = "";
<span>DOMString</span>? <span title="dom-HitRegionOptions-parentID">parentID</span> = null;
-<!-- per Frank Oliver, issue 201 --> <!-- <span>DOMString</span> <span title="dom-HitRegionOptions-cursor">cursor</span> = "inherit";
---> // for control-backed regions:
+ <span>DOMString</span> <span title="dom-HitRegionOptions-cursor">cursor</span> = "inherit";
+ // for control-backed regions:
<span>Element</span>? <span title="dom-HitRegionOptions-control">control</span> = null;
// for unbacked regions:
<span>DOMString</span>? <span title="dom-HitRegionOptions-label">label</span> = null;
@@ -798,12 +798,12 @@
[<a href="#dom-path" title="dom-Path">Constructor</a>]
interface <dfn id="path">Path</dfn> {
void <a href="#dom-path-addpath" title="dom-path-addPath">addPath</a>(<a href="#path">Path</a> path, <span>SVGMatrix</span>? transformation);
-<!-- per Frank Oliver, issue 201 --> <!-- void <span title="dom-path-addPathByStrokingPath">addPathByStrokingPath</span>(<span>Path</span> path, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation);
- void <span title="dom-path-addText">addText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
- void <span title="dom-path-addPathByStrokingText">addPathByStrokingText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
- void <span title="dom-path-addText">addText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, <span>Path</span> path, optional unrestricted double maxWidth);
- void <span title="dom-path-addPathByStrokingText">addPathByStrokingText</span>(DOMString text, <span>CanvasDrawingStyles</span> styles, <span>SVGMatrix</span>? transformation, <span>Path</span> path, optional unrestricted double maxWidth);
--->
+ void <a href="#dom-path-addpathbystrokingpath" title="dom-path-addPathByStrokingPath">addPathByStrokingPath</a>(<a href="#path">Path</a> path, <a href="#canvasdrawingstyles">CanvasDrawingStyles</a> styles, <span>SVGMatrix</span>? transformation);
+ void <a href="#dom-path-addtext" title="dom-path-addText">addText</a>(DOMString text, <a href="#canvasdrawingstyles">CanvasDrawingStyles</a> styles, <span>SVGMatrix</span>? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
+ void <a href="#dom-path-addpathbystrokingtext" title="dom-path-addPathByStrokingText">addPathByStrokingText</a>(DOMString text, <a href="#canvasdrawingstyles">CanvasDrawingStyles</a> styles, <span>SVGMatrix</span>? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
+ void <a href="#dom-path-addtext" title="dom-path-addText">addText</a>(DOMString text, <a href="#canvasdrawingstyles">CanvasDrawingStyles</a> styles, <span>SVGMatrix</span>? transformation, <a href="#path">Path</a> path, optional unrestricted double maxWidth);
+ void <a href="#dom-path-addpathbystrokingtext" title="dom-path-addPathByStrokingText">addPathByStrokingText</a>(DOMString text, <a href="#canvasdrawingstyles">CanvasDrawingStyles</a> styles, <span>SVGMatrix</span>? transformation, <a href="#path">Path</a> path, optional unrestricted double maxWidth);
+
};
<a href="#path">Path</a> implements <a href="#canvaspathmethods">CanvasPathMethods</a>;</pre>
@@ -1049,9 +1049,9 @@
</dd>
-<!-- per Frank Oliver, issue 201 --><!--
- <dt><var title="">context</var> . <code title="dom-context-2d-setLineDash">setLineDash</code>(<var title="">segments</var>)</dt>
- <dt><var title="">styles</var> . <code title="dom-context-2d-setLineDash">setLineDash</code>(<var title="">segments</var>)</dt>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-setLineDash"><a href="#dom-context-2d-setlinedash">setLineDash</a></code>(<var title="">segments</var>)</dt>
+ <dt><var title="">styles</var> . <code title="dom-context-2d-setLineDash"><a href="#dom-context-2d-setlinedash">setLineDash</a></code>(<var title="">segments</var>)</dt>
<dd>
@@ -1062,8 +1062,8 @@
</dd>
- <dt><var title="">segments</var> = <var title="">context</var> . <code title="dom-context-2d-getLineDash">getLineDash</code>()</dt>
- <dt><var title="">segments</var> = <var title="">styles</var> . <code title="dom-context-2d-getLineDash">getLineDash</code>()</dt>
+ <dt><var title="">segments</var> = <var title="">context</var> . <code title="dom-context-2d-getLineDash"><a href="#dom-context-2d-getlinedash">getLineDash</a></code>()</dt>
+ <dt><var title="">segments</var> = <var title="">styles</var> . <code title="dom-context-2d-getLineDash"><a href="#dom-context-2d-getlinedash">getLineDash</a></code>()</dt>
<dd>
@@ -1074,8 +1074,8 @@
</dd>
- <dt><var title="">context</var> . <code title="dom-context-2d-lineDashOffset">lineDashOffset</code></dt>
- <dt><var title="">styles</var> . <code title="dom-context-2d-lineDashOffset">lineDashOffset</code></dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-lineDashOffset"><a href="#dom-context-2d-linedashoffset">lineDashOffset</a></code></dt>
+ <dt><var title="">styles</var> . <code title="dom-context-2d-lineDashOffset"><a href="#dom-context-2d-linedashoffset">lineDashOffset</a></code></dt>
<dd>
@@ -1085,7 +1085,7 @@
finite values are ignored.</p>
</dd>
--->
+
</dl>
<div class="impl">
@@ -1157,14 +1157,13 @@
initially have the value <code>10.0</code>.</p>
<hr>
-<!-- per Frank Oliver, issue 201 --><!--
- <hr><p>Each <code><a href=#canvasdrawingstyles>CanvasDrawingStyles</a></code> object has a <dfn id=dash-list>dash
+
+ <hr><p>Each <code><a href="#canvasdrawingstyles">CanvasDrawingStyles</a></code> object has a <dfn id="dash-list">dash
list</dfn>, which is either empty or consists of an even number of
- positive non-zero numbers. Initially, the <a href=#dash-list>dash list</a>
+ positive non-zero numbers. Initially, the <a href="#dash-list">dash list</a>
must be empty.</p>
- <p>When the <dfn
- title="dom-context-2d-setLineDash"><code>setLineDash()</code></dfn>
+ <p>When the <dfn id="dom-context-2d-setlinedash" title="dom-context-2d-setLineDash"><code>setLineDash()</code></dfn>
method is invoked, it must run the following steps:</p>
<ol>
@@ -1182,33 +1181,29 @@
then let <var title="">a</var> be the concatentation of two copies
of <var title="">a</var>.</p></li>
- <li><p>Let the object's <span>dash list</span> be <var
- title="">a</var>.</p></li>
+ <li><p>Let the object's <a href="#dash-list">dash list</a> be <var title="">a</var>.</p></li>
</ol>
- <p>When the <dfn
- title="dom-context-2d-getLineDash"><code>getLineDash()</code></dfn>
+ <p>When the <dfn id="dom-context-2d-getlinedash" title="dom-context-2d-getLineDash"><code>getLineDash()</code></dfn>
method is invoked, it must return a newly created array whose values
- are the values of the object's <span>dash list</span>, in the same
+ are the values of the object's <a href="#dash-list">dash list</a>, in the same
order.</p>
<p>It is sometimes useful to change the "phase" of the dash pattern,
e.g. to achieve a "marching ants" effect. The phase can be set using
- the <dfn
- title="dom-context-2d-lineDashOffset"><code>lineDashOffset</code></dfn>
+ the <dfn id="dom-context-2d-linedashoffset" title="dom-context-2d-lineDashOffset"><code>lineDashOffset</code></dfn>
attribute. On getting, it must return the current value. On setting,
infinite and NaN values must be ignored, leaving the value
unchanged; other values must change the current value to the new
value.</p>
- <p>When the object implementing the <code>CanvasDrawingStyles</code>
- interface is created, the <code
- title="dom-context-2d-lineDashOffset">lineDashOffset</code>
+ <p>When the object implementing the <code><a href="#canvasdrawingstyles">CanvasDrawingStyles</a></code>
+ 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>path</span></dfn>,
given an object <var title="">style</var> that implements the
@@ -1239,44 +1234,35 @@
previously last line to the newly added closing line), and change
the first point to a join (from the newly added closing line to the
first line).</p>
-<!-- per Frank Oliver, issue 201 --><!--
- <li><p>If the <var title="">styles</var> <span>dash list</span> is
+
+ </li><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>.</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>
- <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
+ <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.</p></li>
<li>
- <p>While <var title="">offset</var> is greater than <var
- title="">width</var>, decrement it by <var
- title="">width</var>.</p>
+ <p>While <var title="">offset</var> is greater than <var title="">width</var>, decrement it by <var title="">width</var>.</p>
- <p>While <var title="">offset</var> is less than <var
- title="">width</var>, increment it by <var
- title="">width</var>.</p>
+ <p>While <var title="">offset</var> is less than <var title="">width</var>, increment it by <var title="">width</var>.</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
+ 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>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
+ </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>.</p></li>
+ line in the last subpath is defined as coordinate <var title="">width</var>.</p></li>
<li><p>Let <var title="">position</var> be 0.</p></li>
@@ -1286,36 +1272,29 @@
other states being <i>on</i> and <i>zero-on</i>).</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>
+ the value of the <var title="">styles</var> <a href="#dash-list">dash
+ list</a>'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>Increment <var title="">position</var> by <var title="">segment length</var>.</p></li>
- <li><p>If <var title="">position</var> is greater than <var
- title="">width</var>, then jump to the step labeled
+ <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>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="">segment length</var> is non-zero, let <var title="">current state</var> be <i>on</i>.</p></li>
<li><p>Increment <var title="">index</var> by one.</p></li>
<li><p><i>Dash Off</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>
+ the value of the <var title="">styles</var> <a href="#dash-list">dash
+ list</a>'s <var title="">index</var>th entry.</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>Let <var title="">start</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><p>Increment <var title="">position</var> by <var title="">segment length</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
+ <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>
+ Otherwise, let <var title="">end</var> be the offset <var title="">position</var> on <var title="">L</var>.</p></li>
<li>
@@ -1339,8 +1318,7 @@
<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
+ 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>
@@ -1359,11 +1337,9 @@
<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
+ 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>
+ 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
@@ -1377,8 +1353,7 @@
</li>
- <li><p>If <var title="">position</var> is greater than <var
- title="">width</var>, then jump to the step labeled
+ <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>If <var title="">segment length</var> is greater than zero,
@@ -1386,12 +1361,12 @@
<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
+ <a href="#dash-list">dash list</a>, then let <var title="">index</var> be
0.</p></li>
<li><p>Return to the step labeled <i>dash on</i>.</p></li>
---> <!-- per Frank Oliver, issue 201 -->
- </li><li><p><i>Joins</i>: Remove from <var title="">path</var> any
+
+ <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>
@@ -2311,8 +2286,8 @@
</dd>
<dt><var title="">path</var> . <code title="dom-path-addPath"><a href="#dom-path-addpath">addPath</a></code>(<var title="">path</var>, <var title="">transform</var>)</dt>
-<!-- per Frank Oliver, issue 201 --> <!-- <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingPath">addPathByStrokingPath</code>(<var title="">path</var>, <var title="">styles</var>, <var title="">transform</var>)</dt>
--->
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingPath"><a href="#dom-path-addpathbystrokingpath">addPathByStrokingPath</a></code>(<var title="">path</var>, <var title="">styles</var>, <var title="">transform</var>)</dt>
+
<dd>
<p>Adds to the path the path given by the argument.</p>
@@ -2320,12 +2295,12 @@
<p>In the case of the stroking variants, the line styles are taken from the <var title="">styles</var> argument, which can be either a <code><a href="#drawingstyle">DrawingStyle</a></code> object or a <code><a href="#canvasrenderingcontext2d">CanvasRenderingContext2D</a></code> object.</p>
</dd>
-<!-- per Frank Oliver, issue 201 --><!--
- <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addText">addText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
- <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText">addPathByStrokingText</code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
--->
+
+ <dt><var title="">path</var> . <code title="dom-path-addText"><a href="#dom-path-addtext">addText</a></code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addText"><a href="#dom-path-addtext">addText</a></code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText"><a href="#dom-path-addpathbystrokingtext">addPathByStrokingText</a></code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addPathByStrokingText"><a href="#dom-path-addpathbystrokingtext">addPathByStrokingText</a></code>(<var title="">text</var>, <var title="">styles</var>, <var title="">transform</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+
<dd>
<p>Adds to the path a series of subpaths corresponding to the given text. If the arguments give a coordinate, the text is drawn horizontally at the given coordinates. If the arguments give a path, the text is drawn along the path. If a maximum width is provided, the text will be scaled to fit that width if necessary.</p>
@@ -2368,130 +2343,107 @@
</ol>
<hr>
-<!-- per Frank Oliver, issue 201 --><!--
- <p>The <dfn
- title="dom-path-addPathByStrokingPath"><code>addPathByStrokingPath(<var
- title="">b</var>, <var title="">styles</var>, <var
- title="">transform</var>)</code></dfn> method, when invoked on a
- <code>Path</code> object <var title="">a</var>, must run the
+
+ <p>The <dfn id="dom-path-addpathbystrokingpath" title="dom-path-addPathByStrokingPath"><code>addPathByStrokingPath(<var title="">b</var>, <var title="">styles</var>, <var title="">transform</var>)</code></dfn> method, when invoked on a
+ <code><a href="#path">Path</a></code> object <var title="">a</var>, must run the
following steps:</p>
<ol>
- <li><p>If the <code>Path</code> object <var title="">b</var> has
+ <li><p>If the <code><a href="#path">Path</a></code> object <var title="">b</var> has
no subpaths, abort these steps.</p></li>
<li><p>Create a copy of all the subpaths in <var title="">b</var>.
Let this copy be known as <var title="">c</var>.</p></li>
- <li><p>Transform all the coordinates and lines in <var
- title="">c</var> by transformation matrix <var
- title="">transform</var>, if it is not null.</p></li>
+ <li><p>Transform all the coordinates and lines in <var title="">c</var> by transformation matrix <var title="">transform</var>, if it is not null.</p></li>
<li><p>Let a new list of subpaths <var title="">d</var> be the
- result of <span title="trace a path">tracing</span> <var
- title="">c</var>, using the <var title="">styles</var> argument for
+ result of <a href="#trace-a-path" title="trace a path">tracing</a> <var title="">c</var>, using the <var title="">styles</var> argument for
the line styles.</p>
- <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ </li><li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
last point in the last subpath of <var title="">d</var>.</p></li>
- <li><p>Add all the subpaths in <var title="">d</var> to <var
- title="">a</var>.</p></li>
+ <li><p>Add all the subpaths in <var title="">d</var> to <var title="">a</var>.</p></li>
- <li><p>Create a new subpath in <var title="">a</var> with (<var
- title="">x</var>, <var title="">y</var>) as the only point in the
+ <li><p>Create a new subpath in <var title="">a</var> with (<var title="">x</var>, <var title="">y</var>) as the only point in the
subpath.</p></li>
</ol>
<hr>
- <p>The <dfn title="dom-path-addText"><code>addText()</code></dfn>
- and <dfn
- title="dom-path-addPathByStrokingText"><code>addPathByStrokingText()</code></dfn>
+ <p>The <dfn id="dom-path-addtext" title="dom-path-addText"><code>addText()</code></dfn>
+ and <dfn id="dom-path-addpathbystrokingtext" title="dom-path-addPathByStrokingText"><code>addPathByStrokingText()</code></dfn>
methods each come in two variants: one rendering text at a given
coordinate, and one rendering text along a given path. In both
- cases, the methods take a <code>CanvasDrawingStyles</code> object
+ cases, the methods take a <code><a href="#canvasdrawingstyles">CanvasDrawingStyles</a></code> object
argument for the text and (if appropriate) line styles to use, an
<code>SVGMatrix</code> object <var title="">transform</var> (which
can be null), and a maximum width can optionally be provided.</p>
- <p>When one of the <code
- title="dom-path-addText">addText()</code> and <code
- title="dom-path-addPathByStrokingText">addPathByStrokingText()</code> variants
- that take as argument an (<var title="">x</var>, <var
- title="">y</var>) coordinate is invoked, the method must run the
+ <p>When one of the <code title="dom-path-addText"><a href="#dom-path-addtext">addText()</a></code> and <code title="dom-path-addPathByStrokingText"><a href="#dom-path-addpathbystrokingtext">addPathByStrokingText()</a></code> variants
+ that take as argument an (<var title="">x</var>, <var title="">y</var>) coordinate is invoked, the method must run the
following algorithm:</p>
<ol>
- <li><p>Run the <span>text preparation algorithm</span>, passing it
- <var title="">text</var>, the <code>CanvasDrawingStyles</code>
+ <li><p>Run the <a href="#text-preparation-algorithm">text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href="#canvasdrawingstyles">CanvasDrawingStyles</a></code>
object argument, and, if the <var title="">maxWidth</var> argument
was provided, that argument. Let <var title="">glyphs</var> be the
result.</p>
- <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.</p></li>
+ </li><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.</p></li>
<li><p>Let <var title="">glyph subpaths</var> be a
- <span>path</span> describing the shapes given in <var
- title="">glyphs</var>, with each CSS pixel in the coordinate space
+ <a href="#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
+ in <var title="">glyph subpaths</var>. Subpaths in <var title="">glyph subpaths</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>If the method is <code
- title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>,
- replace <var title="">glyph subpaths</var> by the result of <span
- title="trace a path">tracing</span> <var title="">glyph
- subpaths</var>, using the <code>CanvasDrawingStyles</code> object
+ </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 line styles.</p>
- <li><p>Transform all the coordinates and lines in <var
- title="">glyph subpaths</var> by the transformation matrix <var
- title="">transform</var>, if it is not null.</p></li>
+ </li><li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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
+ <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>.</p></li>
<li><p>Add all the subpaths in <var title="">glyph
- subpaths</var> to the <code>Path</code> object.</p></li>
+ subpaths</var> to the <code><a href="#path">Path</a></code> object.</p></li>
- <li><p>Create a new subpath in the <code>Path</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
+ <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.</p></li>
</ol>
- <p>When one of the <code
- title="dom-path-addText">addText()</code> and <code
- title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>
- variants that take as argument a <code>Path</code> object is
+ <p>When one of the <code title="dom-path-addText"><a href="#dom-path-addtext">addText()</a></code> and <code title="dom-path-addPathByStrokingText"><a href="#dom-path-addpathbystrokingtext">addPathByStrokingText()</a></code>
+ variants that take as argument a <code><a href="#path">Path</a></code> object is
invoked, the method must run the following algorithm:</p>
<ol>
- <li><p>Let <var title="">target</var> be the <code>Path</code>
+ <li><p>Let <var title="">target</var> be the <code><a href="#path">Path</a></code>
object on which the method was invoked.</p></li>
- <li><p>Let <var title="">path</var> be the <code>Path</code> object
+ <li><p>Let <var title="">path</var> be the <code><a href="#path">Path</a></code> object
that was provided in the method's arguments.</p></li>
- <li><p>Run the <span>text preparation algorithm</span>, passing it
- <var title="">text</var>, the <code>CanvasDrawingStyles</code>
+ <li><p>Run the <a href="#text-preparation-algorithm">text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href="#canvasdrawingstyles">CanvasDrawingStyles</a></code>
object argument, and, if the <var title="">maxWidth</var> argument
was provided, that argument. Let <var title="">glyphs</var> be the
resulting array, and <var title="">physical alignment</var> be the
resulting alignment value.</p>
- <li><p>Let <var title="">width</var> be the aggregate length of all
+ </li><li><p>Let <var title="">width</var> be the aggregate length of all
the subpaths in <var title="">path</var>, including the distances
from the last point of each closed subpath to the first point of
that subpath.</p></li>
@@ -2530,18 +2482,14 @@
<li>
- <p>For each glyph <var title="">glyph</var> in the <var
- title="">glyphs</var> array, run these substeps:</p>
+ <p>For each glyph <var title="">glyph</var> in the <var title="">glyphs</var> array, run these substeps:</p>
<ol>
- <li><p>Let <var title="">dx</var> be the <var
- title="">x</var>-coordinate of the horizontal center of the
- bounding box of the shape described by <var
- title="">glyph</var>, in CSS pixels.</p></li>
+ <li><p>Let <var title="">dx</var> be the <var title="">x</var>-coordinate of the horizontal center of the
+ bounding box of the shape described by <var title="">glyph</var>, in CSS pixels.</p></li>
- <li><p>If <var title="">dx</var> is negative or greater than <var
- title="">width</var>, skip the remainder of these substeps for
+ <li><p>If <var title="">dx</var> is negative or greater than <var title="">width</var>, skip the remainder of these substeps for
this glyph.</p></li>
<li><p>Recast <var title="">dx</var> to coordinate spaces units
@@ -2549,20 +2497,15 @@
dimensionality of <var title="">dx</var>, not its numeric
value.)</p>
- <li><p>Find the point <var title="">p</var> on <var
- title="">path</var> (or implied closing lines in <var
- title="">path</var>) that corresponds to the position <var
- title="">dx</var> on the coordinate line <var
- title="">L</var>.</p>
+ </li><li><p>Find the point <var title="">p</var> on <var title="">path</var> (or implied closing lines in <var title="">path</var>) that corresponds to the position <var title="">dx</var> on the coordinate line <var title="">L</var>.</p>
- <li><p>Let <var title="">θ</var> be the clockwise angle
+ </li><li><p>Let <var title="">θ</var> be the clockwise angle
from the positive x-axis to the side of the line that is
- tangential to <var title="">path</var> at the point <var
- title="">p</var> that is going in the same direction as the line
+ tangential to <var title="">path</var> at the point <var title="">p</var> that is going in the same direction as the line
at point <var title="">p</var>.</p></li>
<li><p>Rotate the shape described by <var title="">glyph</var>
- clockwise by <var title="">θ</var> about the point that is
+ clockwise by <var title="">θ</var> about the point that is
at the <var title="">dx</var> coordinate horizontally and the
zero coordinate vertically.</p></li>
@@ -2570,31 +2513,23 @@
coordinate of the point <var title="">p</var>.</p></li>
<li><p>Move the shape described by <var title="">glyph</var> to
- the right by <var title="">x</var> and down by <var
- title="">y</var>.</p></li>
+ the right by <var title="">x</var> and down by <var title="">y</var>.</p></li>
<li><p>Let <var title="">glyph subpaths</var> be a list of
subpaths describing the shape given in <var title="">glyph</var>,
- with each CSS pixel in the coordinate space of <var
- title="">glyph</var> mapped to one coordinate space unit in <var
- title="">glyph subpaths</var>. Subpaths in <var title="">glyph
+ with each CSS pixel in the coordinate space of <var title="">glyph</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
agent's font subsystem renders fonts and regardless of how the
fonts themselves are defined.</p>
- <li><p>If the method is <code
- title="dom-path-addPathByStrokingText">addPathByStrokingText()</code>,
- replace <var title="">glyph subpaths</var> by the result of <span
- title="trace a path">tracing</span> <var title="">glyph
- subpaths</var>, using the <code>CanvasDrawingStyles</code> object
+ </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 line styles.</p>
- <li><p>Transform all the coordinates and lines in <var
- title="">glyph subpaths</var> by the transformation matrix <var
- title="">transform</var>, if it is not null.</p></li>
+ </li><li><p>Transform all the coordinates and lines in <var title="">glyph subpaths</var> by the transformation matrix <var title="">transform</var>, if it is not null.</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
+ <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.)</p></li>
@@ -2606,13 +2541,12 @@
</li>
- <li><p>Create a new subpath in the <code>Path</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
+ <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.</p></li>
</ol>
---><!-- per Frank Oliver, issue 201 -->
+
</div>
@@ -4140,14 +4074,14 @@
<li><p>A count of regions that have this one as their <a href="#hit-region's-parent" title="hit region's parent">parent</a>, known as the <dfn id="hit-region's-child-count">hit
region's child count</dfn>.</p></li>
-<!-- per Frank Oliver, issue 201 --> <!--
- <li><p>A <dfn title="hit region's cursor specification">cursor
+
+ <li><p>A <dfn id="hit-region's-cursor-specification" title="hit region's cursor specification">cursor
specification</dfn>, in the form of either a CSS cursor value, or
the string "<code title="">inherit</code>" meaning that the cursor
- of the <span>hit region's parent</span>, if any, or of the
+ of the <a href="#hit-region's-parent">hit region's parent</a>, if any, or of the
<code>canvas</code> element, if not, is to be used
instead.</p></li>
--->
+
<li>
<p>Optionally, either a <a href="#hit-region's-control" title="hit region's
@@ -4214,16 +4148,15 @@
</dt><dd>The ID of the parent region, for purposes of navigation by
accessibility tools and for cursor fallback.</dd>
-<!-- per Frank Oliver, issue 201 --> <!--
+
<dt><code title="dom-HitRegionOptions-cursor">cursor</code> (default "<code title="">inherit</code>")
- <dd>The cursor to use when the mouse is over this region. The
+ </dt><dd>The cursor to use when the mouse is over this region. The
value "<code title="">inherit</code>" means to use the cursor for
- the parent region (as specified by the <code
- title="dom-HitRegionOptions-parentID">parentID</code> member), if
+ the parent region (as specified by the <code title="dom-HitRegionOptions-parentID">parentID</code> member), if
any, or to use the <code>canvas</code> element's cursor if the
region has no parent.</dd>
--->
+
<dt><code title="dom-HitRegionOptions-control">control</code> (default null)
</dt><dd>An element (that is a descendant of the <code>canvas</code>)
@@ -4258,11 +4191,11 @@
<li>With a label, they can make it easier for users to explore a
canvas without seeing it, e.g. by touch on a mobile device.</li>
-<!-- per Frank Oliver, issue 201 --> <!--
+
<li>With a cursor, they can make it easier for different regions
of the canvas to have different cursors, with the user agent
automatically switching between them.</li>
--->
+
</ul>
</dd>
@@ -4355,31 +4288,26 @@
<li><p>Otherwise, return <var title="">control</var>.</p></li>
</ol>
-<!-- per Frank Oliver, issue 201 --> <!--
- <p><dfn>The cursor for a hit region</dfn> <var
- title="">region</var> of a <code>canvas</code> element <var
- title="">ancestor</var> is the value returned by the following
+
+ <p><dfn id="the-cursor-for-a-hit-region">The cursor for a hit region</dfn> <var title="">region</var> of a <code>canvas</code> element <var title="">ancestor</var> is the value returned by the following
algorithm:</p>
<ol>
- <li><p><i>Loop</i>: If <var title="">region</var> has a <span
- title="hit region's cursor specification">cursor
- specification</span> other than "<code title="">inherit</code>",
- then return that <span>hit region's cursor specification</span>
+ <li><p><i>Loop</i>: If <var title="">region</var> has a <a href="#hit-region's-cursor-specification" title="hit region's cursor specification">cursor
+ specification</a> other than "<code title="">inherit</code>",
+ then return that <a href="#hit-region's-cursor-specification">hit region's cursor specification</a>
and abort these steps.</p></li>
- <li><p>If <var title="">region</var> has a <span title="hit
- region's parent">parent</span>, then let <var
- title="">region</var> be that <span>hit region's parent</span>,
+ <li><p>If <var title="">region</var> has a <a href="#hit-region's-parent" title="hit
+ region's parent">parent</a>, then let <var title="">region</var> be that <a href="#hit-region's-parent">hit region's parent</a>,
and return to the step labeled <i>loop</i>.</p></li>
<li><p>Otherwise, return the used value of the 'cursor' property
- for the <code>canvas</code> element. <a
- href="#refsCSSUI">[CSSUI]</a></p></li>
+ for the <code>canvas</code> element. <a href="#refsCSSUI">[CSSUI]</a></p></li>
</ol>
--->
+
<p><dfn id="the-region-for-a-pixel">The region for a pixel</dfn> <var title="">pixel</var> on a
<code>canvas</code> element <var title="">ancestor</var> is the
value returned by the following algorithm (which can return a
@@ -4560,13 +4488,12 @@
steps.</p>
<ul class="brief">
-<!-- per Frank Oliver, issue 201 --> <!--
- <li>The <var title="">arguments</var> object's <code
- title="dom-HitRegionOptions-cursor">cursor</code> member is not
+
+ <li>The <var title="">arguments</var> object's <code title="dom-HitRegionOptions-cursor">cursor</code> member is not
null but is neither an <span>ASCII case-insensitive</span> match
for the string "<code title="">inherit</code>", nor a valid CSS
'cursor' property value. <a href="#refsCSSUI">[CSSUI]</a></li>
--->
+
<li>The <var title="">arguments</var> object's <code title="dom-HitRegionOptions-role">role</code> member is not null
but its value is not an <span>ordered set of unique
space-separated tokens</span> whose tokens are all
@@ -4615,7 +4542,7 @@
</dt><dd><p>Initially zero.
- </p></dd><dt><span>Hit region's cursor specification</span>
+ </p></dd><dt><a href="#hit-region's-cursor-specification">Hit region's cursor specification</a>
</dt><dd><p>If <var title="">parent region</var> is not null: <var title="">parent region</var>. Otherwise, <var title="">region</var> has no <a href="#hit-region's-parent" title="hit region's
parent">parent</a>.
@@ -4649,23 +4576,21 @@
</p></dd></dl>
</li>
-<!-- per Frank Oliver, issue 201 --> <!--
+
<li>
- <p>If the <var title="">arguments</var> object's <code
- title="dom-HitRegionOptions-cursor">cursor</code> member is not
+ <p>If the <var title="">arguments</var> object's <code title="dom-HitRegionOptions-cursor">cursor</code> member is not
null, then act as if a CSS rule for the <code>canvas</code>
element setting its 'cursor' property had been seen, whose value
- was the <span>hit region's cursor specification</span>.</p>
+ was the <a href="#hit-region's-cursor-specification">hit region's cursor specification</a>.</p>
<p class="note">For example, if the user agent prefetches cursor
values, this would cause that to happen in response to an
- appropriately-formed <code
- title="dom-context-2d-addHitRegion">addHitRegion()</code>
+ appropriately-formed <code title="dom-context-2d-addHitRegion"><a href="#dom-context-2d-addhitregion">addHitRegion()</a></code>
call.</p>
</li>
--->
+
<li><p>If the <var title="">arguments</var> object's <code title="dom-HitRegionOptions-control">control</code> member is not
null, then let <var title="">previous region for the control</var>
be <a href="#the-region-representing-the-control">the region representing the control</a> given by the
@@ -4835,16 +4760,16 @@
</ol>
<hr>
-<!-- per Frank Oliver, issue 201 --><!--
+
<p>When a user's pointing device cursor is positioned over a
<code>canvas</code> element, user agents should render the pointing
device cursor according to the cursor specification described by
- <span title="the cursor for a hit region">the cursor for the hit
- region</span> that is <span title="the region for a pixel">the
- region for the pixel</span> that the pointing device designates.</p>
+ <a href="#the-cursor-for-a-hit-region" title="the cursor for a hit region">the cursor for the hit
+ region</a> that is <a href="#the-region-for-a-pixel" title="the region for a pixel">the
+ region for the pixel</a> that the pointing device designates.</p>
<hr>
--->
+
<p>User agents are encouraged to make use of the information present
in a <code>canvas</code> element's <a href="#hit-region-list">hit region list</a> to
improve the accessibility of <code>canvas</code> elements.</p>
Received on Thursday, 18 October 2012 21:43:16 UTC