[html5] r7023 - [giow] (0) Path objects and drawing text to a path or along a path. Note that th [...]
whatwg at whatwg.org
whatwg at whatwg.org
Fri Mar 9 15:58:49 PST 2012
Author: ianh
Date: 2012-03-09 15:58:48 -0800 (Fri, 09 Mar 2012)
New Revision: 7023
Modified:
complete.html
index
source
Log:
[giow] (0) Path objects and drawing text to a path or along a path. Note that there's not yet any way to _use_ the Path objects. That's next...
Affected topics: Canvas, Security
Modified: complete.html
===================================================================
--- complete.html 2012-03-07 22:53:20 UTC (rev 7022)
+++ complete.html 2012-03-09 23:58:48 UTC (rev 7023)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 7 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 9 March 2012</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>
@@ -603,17 +603,18 @@
<li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
<li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
<li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</a></li>
- <li><a href=#the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</a></li>
+ <li><a href=#path-objects><span class=secno>4.8.11.1.6 </span><code>Path</code> objects</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</a></li>
<li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
<li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.12 </span>Compositing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.13 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.14 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.15 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.16 </span>Examples</a></ol></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.13 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.14 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.15 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.16 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.17 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -35001,8 +35002,22 @@
readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
-};</pre>
+};
+[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
+interface <dfn id=path>Path</dfn> {
+ void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
+ void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> path);
+ void <span title=dom-path-addFillText>addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title=dom-path-addFillText>addFillText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+ void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+};
+<a href=#path>Path</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
+<a href=#path>Path</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
+<a href=#path>Path</a> implements <a href=#canvastext>CanvasText</a>;</pre>
+
<!-- ARC-ORDER note (see above):
some demos rely on the precise order of the arc() and arcTo()
methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
@@ -35064,6 +35079,10 @@
no way to know which is the "element in question" at the time that
the color is specified.</p>
+ <p class=note>Similar concerns exist with font-related properties;
+ the rules for those are described in detail in the relevant section
+ below.</p>
+
</div>
@@ -35154,6 +35173,7 @@
</div>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35162,6 +35182,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
<dd>
@@ -35170,6 +35191,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35178,6 +35200,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -35186,6 +35209,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -35248,6 +35272,7 @@
<h6 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35259,6 +35284,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35273,6 +35299,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35287,6 +35314,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35431,6 +35459,7 @@
<h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35446,6 +35475,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35458,6 +35488,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35471,9 +35502,13 @@
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code> interface have
+ attributes (defined in this section) that control how text is laid
+ out (rasterized or outlined) by the object. Such objects also have a
+ <dfn id=font-style-source-node>font style source node</dfn>. For
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
+ <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#path>Path</a></code> objects, it's the
+ <a href=#path-scope-node>path scope node</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -35487,15 +35522,16 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href=#refsCSS>[CSS]</a></p>
- <p>Font names must be interpreted in the context of the
- <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ <p>Font names must be interpreted in the context of the <a href=#font-style-source-node>font
+ style source node</a>'s stylesheets when the font is to be used;
+ any fonts embedded using <code title="">@font-face</code> that are
+ visible to that element must therefore be available once they are
+ loaded. (If a reference font is used before it is fully loaded, or
+ if the <a href=#font-style-source-node>font style source node</a> does not have that font
+ in scope at the time the font is to be used, then it must be treated
+ as if it was an unknown font, falling back to another as described
+ by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
- <!-- XXX Path objects don't have a canvas -->
-
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
make the font look very ugly.</p>
@@ -35524,17 +35560,20 @@
sans-serif. When the 'font-size' component is set to lengths using
percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
+
+
+ of the 'font-size' property of the <a href=#font-style-source-node>font style source
+ node</a> at the time that the attribute is set, if that is an
+ element. When the 'font-weight' component is set to the relative
+ values 'bolder' and 'lighter', these must be interpreted relative to
+ the computed value of the 'font-weight' property of the <a href=#font-style-source-node>font
+ style source node</a> at the time that the attribute is set, if
+ that is an element. If the computed values are undefined for a
+ particular case (e.g. because the <a href=#font-style-source-node>font style source
+ node</a> is not an element or is not <a href=#in-a-document>in a
<code>Document</code></a>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
+ default.</p>
<p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
attribute, on getting, must return the current value. On setting, if
@@ -35584,22 +35623,195 @@
<dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
<dd>The bottom of the em square</dd>
- </dl><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
+ </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
+ as input a string <var title="">text</var>, a
+ <code><a href=#canvastext>CanvasText</a></code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of
+ glyph shapes, each positioned on a common coordinate space, and a
+ <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i><a href=#center>center</a></i>. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var>.)</p>
+ <ol><li><p>If <var title="">maxWidth</var> was provided but is less
+ than or equal to zero, return an empty array.</li>
+
+ <li><p>Replace all the <a href=#space-character title="space character">space
+ characters</a> in <var title="">text</var> with U+0020 SPACE
+ characters.</li>
+
+ <li><p>Let <var title="">font</var> be the current font of <var title="">target</var>, as given by that object's <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>
+
+ <li>
+
+ <p>Apply the appropriate step from the following list to determine
+ the value of <var title="">direction</var>:</p>
+
+ <dl class=switch><dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is an element</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
+ directionality</a> of the <var title="">target</var> object's
+ <a href=#font-style-source-node>font style source node</a>.</dd>
+
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is a <code><a href=#document>Document</a></code> and that
+ <code><a href=#document>Document</a></code> has a root element child</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
+ directionality</a> of the <var title="">target</var> object's
+ <a href=#font-style-source-node>font style source node</a>'s root element child.</dd>
+
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is a <code><a href=#document>Document</a></code> and that
+ <code><a href=#document>Document</a></code> has no root element child</dt>
+
+ <dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
+
+ </dl></li>
+
+ <li><p>Form a hypothetical infinitely-wide CSS line box containing
+ a single inline box containing the text <var title="">text</var>,
+ with all the properties at their initial values except the 'font'
+ property of the inline box set to <var title="">font</var>, the
+ 'direction' property of the inline box set to <var title="">direction</var>, and the 'white-space' property set to
+ 'pre'. <a href=#refsCSS>[CSS]</a></li>
+
+ <!-- if you insert a step here, make sure to adjust the next step's
+ final words -->
+
+ <li><p>If <var title="">maxWidth</var> was provided and the
+ hypothetical width of the inline box in the hypothetical line box
+ is greater than <var title="">maxWidth</var> CSS pixels, then
+ change <var title="">font</var> to have a more condensed font (if
+ one is available or if a reasonably readable one can be synthesized
+ by applying a horizontal scale factor to the font) or a smaller
+ font, and return to the previous step.</li>
+
+ <li>
+
+ <p>The <var title="">anchor point</var> is a point on the inline
+ box, and the <var title="">physical alignment</var> is one of the
+ values <i>left</i>, <i>right</i>, and <i><a href=#center>center</a></i>. These
+ variables are determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values as
+ follows:</p>
+
+ <p>Horizontal position:</p>
+
+ <dl><dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">left</code></dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the left edge of the inline box, and let <var title="">physical alignment</var> be <i>left</i>.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">right</code></dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the right edge of the inline box, and let <var title="">physical alignment</var> be <i>right</i>.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be half way between the left and right edges of the
+ inline box, and let <var title="">physical alignment</var> be
+ <i><a href=#center>center</a></i>.</dd>
+
+ </dl><p>Vertical position:</p>
+
+ <dl><dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the top of the em box of the first available font of the
+ inline box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the hanging baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the bottom and the top of the em box of the
+ first available font of the inline box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the alphabetic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the ideographic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the bottom of the em box of the first available font of the
+ inline box.</dd>
+
+ </dl></li>
+
+ <li>
+
+ <p>Let <var title="">result</var> be an array constructed by
+ iterating over each glyph in the inline box from left to right (if
+ any), adding to the array, for each glyph, the shape of the glyph
+ as it is in the inline box, positioned on a coordinate space using
+ CSS pixels with its origin is at the <var title="">anchor
+ point</var>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">result</var>, and, for callers that
+ need it, <var title="">physical alignment</var> as the alignment
+ value.</li>
+
+ </ol><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
+
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
- interface has a <a href=#path>path</a>. A <dfn id=path>path</dfn> has a list of
- zero or more subpaths. Each subpath consists of a list of one or
- more points, connected by straight or curved lines, and a flag
- indicating whether the subpath is closed or not. A closed subpath is
- one where the last point of the subpath is connected to the first
- point of the subpath by a straight line. Subpaths with fewer than
- two points are ignored when painting the path.</p>
+ interface has a <a href=#concept-path title=concept-path>path</a>. A <dfn id=concept-path title=concept-path>path</dfn> has a list of zero or more subpaths.
+ Each subpath consists of a list of one or more points, connected by
+ straight or curved lines, and a flag indicating whether the subpath
+ is closed or not. A closed subpath is one where the last point of
+ the subpath is connected to the first point of the subpath by a
+ straight line. Subpaths with fewer than two points are ignored when
+ painting the path.</p>
<p>When an object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
- interface is created, its <a href=#path>path</a> must be initialized to
- zero subpaths.</p>
+ interface is created, its <a href=#concept-path title=concept-path>path</a>
+ must be initialized to zero subpaths.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35608,6 +35820,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>
<dd>
@@ -35616,6 +35829,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35624,6 +35838,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35632,6 +35847,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35640,6 +35856,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
<dd>
@@ -35653,6 +35870,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
<dd>
@@ -35668,6 +35886,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
@@ -35677,11 +35896,11 @@
</dl><div class=impl>
- <p>The following methods allow authors to manipulate the <a href=#path title=path>paths</a> of objects implementing the
+ <p>The following methods allow authors to manipulate the <a href=#concept-path title=concept-path>paths</a> of objects implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface.</p>
- <p>The points and lines added to an object's <a href=#path>path</a> by
- these methods must be transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ <p>The points and lines added to an object's <a href=#concept-path title=concept-path>path</a> by these methods must be
+ transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of the object implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface before they are added to
the path.</p>
@@ -35698,11 +35917,12 @@
<p>When the user agent is to <dfn id=ensure-there-is-a-subpath>ensure there is a subpath</dfn>
for a coordinate (<var title="">x</var>, <var title="">y</var>) on a
- <a href=#path>path</a>, the user agent must check to see if the
- <a href=#path>path</a> has any subpaths, and if it does not, then the
- user agent must create a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as its first (and only)
- point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code>
- method had been called.</p>
+ <a href=#concept-path title=concept-path>path</a>, the user agent must check to
+ see if the <a href=#concept-path title=concept-path>path</a> has any subpaths,
+ and if it does not, then the user agent must create a new subpath
+ with the point (<var title="">x</var>, <var title="">y</var>) as its
+ first (and only) point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> method had been
+ called.</p>
<p>The <dfn id=dom-context-2d-closepath title=dom-context-2d-closePath><code>closePath()</code></dfn>
@@ -35834,9 +36054,314 @@
+ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path</a></code> objects</h6>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</h6>
+ <p><code><a href=#path>Path</a></code> objects can be used to declare paths that are
+ then later used on <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects. In
+ addition to many of the APIs described in earlier sections,
+ <code><a href=#path>Path</a></code> objects have methods to combine paths, and to add
+ text to paths.</p>
+ <dl class=domintro><dt><var title="">path</var> = new <code title=dom-path><a href=#dom-path>Path</a></code>([ <var title="">element</var> ])</dt>
+
+ <dd>
+
+ <p>Creates a new <code><a href=#path>Path</a></code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title=dom-path-addFill><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>
+
+ <dd>
+
+ <p>Adds to the path the path given by the argument.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title=dom-path-addFillText>addFillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addFillText>addFillText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStrokeText>addStrokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStrokeText>addStrokeText</code>(<var title="">text</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>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>Each <code><a href=#path>Path</a></code> object has a <dfn id=path-scope-node>path scope node</dfn>.</p>
+
+ <p>The <dfn id=dom-path title=dom-path><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code><a href=#path>Path</a></code> object.
+ If the constructor was passed an argument, then the
+ <code><a href=#path>Path</a></code> object's <a href=#path-scope-node>path scope node</a> is that
+ element. Otherwise, the object's <a href=#path-scope-node>path scope node</a> is
+ the <code><a href=#document>Document</a></code> object of the <a href=#active-document>active
+ document</a> of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the interface object of the
+ invoked constructor is found.</p>
+
+ <p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</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><a href=#path>Path</a></code> object <var title="">b</var> has
+ no subpaths, abort these steps.</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>.</li>
+
+ <li><p>Transform all the coordinates in <var title="">c</var> by
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> of <var title="">a</var>.</li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ last point in the last subpath of <var title="">c</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">c</var> to <var title="">a</var>.</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
+ subpath.</li>
+
+ </ol><p>The <dfn id=dom-path-addstroke title=dom-path-addStroke><code>addStroke(<var title="">b</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><a href=#path>Path</a></code> object <var title="">b</var> has
+ no subpaths, abort these steps.</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>.</li>
+
+ <li><p>Transform all the coordinates in <var title="">c</var> by
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> of <var title="">a</var>.</li>
+
+ <li><p>Create a new list of subpaths <var title="">d</var>,
+ consisting of the subpaths necessary to describe the result of
+ tracing the subpaths in <var title="">c</var>, in the same order,
+ while applying the line styles of <var title="">a</var> (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ Subpaths in <var title="">d</var> must wind clockwise, regardless
+ of the direction of paths in <var title="">c</var>.</p>
+
+ <!--
+
+ Because both of these examples result in two lines (assuming
+ non-zero winding rules, things are different under even/odd),
+ there's no "hole" where the lines overlap:
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.stroke();
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.lineTo(300,300);
+ c.closePath();
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.lineTo(300,300);
+ c.closePath();
+ c.stroke();
+
+ ...and we want the same result when you create the two subpaths
+ in each example above as two Paths, stroke them onto a third
+ Path, and then fill that Path on the context.
+
+ -->
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ last point in the last subpath of <var title="">d</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">d</var> to <var title="">a</var>.</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
+ subpath.</li>
+
+ </ol><p>The <dfn id=dom-context-2d-addfilltext title=dom-context-2d-addFillText><code>addFillText()</code></dfn> and
+ <dfn id=dom-context-2d-addstroketext title=dom-context-2d-addStrokeText><code>addStrokeText()</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, a maximum width can optionally be provided.</p>
+
+ <p>When one of the <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</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 <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href=#path>Path</a></code> object, 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.</li>
+
+ <li><p>Let <var title="">glyph subpaths</var> be a list of subpaths
+ 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
+ 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-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <code><a href=#path>Path</a></code> object (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also all
+ wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> of the <code><a href=#path>Path</a></code> object.</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="">glyph subpaths</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">glyph
+ subpaths</var> to the <code><a href=#path>Path</a></code> object.</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 the
+ subpath.</li>
+
+ </ol><p>When one of the <code title=dom-context-2d-addFillText><a href=#dom-context-2d-addfilltext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</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><a href=#path>Path</a></code>
+ object on which the method was invoked.</li>
+
+ <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.</li>
+
+ <li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, <var title="">target</var>, 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
+ 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.</li>
+
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ for of all the subpaths in <var title="">path</var>, with
+ additional lines drawn between the last point and the first point
+ of each closed subpath, such that the first point of the first
+ subpath is defined as point 0, and the last point of the last
+ subpath, if the last subpath is not closed, or the second
+ occurrence first point of that subpath, if it is closed, is defined
+ as point <var title="">width</var>.</li>
+
+ <li>
+
+ <p>Let <var title="">offset</var> be determined according to the
+ appropriate step below:</p>
+
+ <dl class=switch><dt>If <var title="">physical alignment</var> is <i>left</i></dt>
+ <dd>Let <var title="">offset</var> be zero.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i>right</i></dt>
+ <dd>Let <var title="">offset</var> be <var title="">width</var>.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i><a href=#center>center</a></i></dt>
+ <dd>Let <var title="">offset</var> be half of <var title="">width</var>.</dd>
+
+ </dl></li>
+
+ <li><p>Move all the shapes in <var title="">glyphs</var> to the
+ right by <var title="">offset</var> CSS pixels.</li>
+
+ <li>
+
+ <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.</li>
+
+ <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.</li>
+
+ <li><p>Recast <var title="">dx</var> to coordinate spaces units
+ in <var title="">path</var>. (This just changes the
+ dimensionality of <var title="">dx</var>, not its numeric
+ value.)</p> <!-- hide this step if people get confused by the
+ pedancy -->
+
+ <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
+ 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
+ at point <var title="">p</var>.</li>
+
+ <li><p>Rotate the shape described by <var title="">glyph</var>
+ clockwise by <var title="">θ</var> about the point that is
+ at the <var title="">dx</var> coordinate horizontally and the
+ zero coordinate vertically.</li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ coordinate of the point <var title="">p</var>.</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>.</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
+ 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-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <var title="">target</var> object
+ (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
+ <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also
+ all wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> of <var title="">target</var>.</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="">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="">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 the
+ subpath.</li>
+
+ </ol></div>
+
+
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -36227,12 +36752,364 @@
- <h6 id=the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</h6>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
+
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
+
+ <div class=impl>
+
+ <p>The <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
+
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
+
+ </div>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
+
+ <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
+ or width are zero, this method has no effect.</p>
+
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
+
+ </div>
+
+
+
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+
+ <dd>
+
+ <p>Fills or strokes (respectively) the given text at the given
+ position. If a maximum width is provided, the text will be scaled
+ to fit that width if necessary.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
+
+ <dd>
+
+ <p>Returns the advance width of the text that was passed to the
+ <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
+ method.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
+ following methods for rendering text directly to the canvas.</p>
+
+ <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
+ <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
+ than <var title="">maxWidth</var> if specified, using the current
+ <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol><li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ object, 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.</li>
+
+ <li>
+
+ <p>Paint the shapes given in <var title="">glyphs</var>, as
+ transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit.</p>
+
+ <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>,
+ <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
+ applied to the shapes and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
+ ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code>, the reverse
+ holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
+ applied to the shape outlines, along with the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes,
+ and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must
+ be ignored.</p>
+
+ <p>These shapes are painted without affecting the current path,
+ and are subject to <a href=#shadows title=shadows>shadow effects</a>,
+ <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the
+ <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
+
+ </li>
+
+ </ol><!--v6DVT - this is commented out until CSS can get its act together
+enough to actual specify vertical text rendering (how long have we
+been waiting now?)
+
+WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
+
+ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
+HAVE REJIGGED HOW TEXT WORKS IN v5
+
+ <p>The <dfn
+ title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
+ and <dfn
+ title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxHeight</var>, and render the given <var
+ title="">text</var> as vertical text at the given (<var
+ title="">x</var>, <var title="">y</var>) coordinates ensuring that
+ the text isn't taller than <var title="">maxHeight</var> if
+ specified, using the current <code
+ title="dom-context-2d-font">font</code> and <code
+ title="dom-context-2d-textAlign">textAlign</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">maxHeight</var> is present but less than or
+ equal to zero, return without doing anything; abort these
+ steps.</p></li>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a <em class="XXX">whatever CSS ends up calling
+ vertical line boxes and inline boxes</em> containing the text <var
+ title="">text</var>, with all the properties at their initial
+ values except the 'font' property of the inline box set to <var
+ title="">font</var> and the 'direction' property of the inline
+ box set to <span>the directionality</span> of the <code>canvas</code>
+ element.</p></li>
+
+ <!- - if you insert a step here, make sure to adjust the next step's
+ final words - ->
+
+ <li><p>If the <var title="">maxHeight</var> argument was specified
+ and the hypothetical height of the <em class="XXX">box</em>
+ in the hypothetical line box is greater than <var
+ title="">maxHeight</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is
+ available or if a reasonably readable one can be synthesized by
+ applying an appropriate scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the <em
+ class="XXX">inline box</var>, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the top edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the bottom edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the top and bottom edges of the <em
+ class="XXX">inline box</em>.</dd>
+
+ </dl>
+
+ <p>Let the horizontal position be half way between the left and
+ right edges of the em box of the first available font of the <em
+ class="XXX">inline box</em>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code
+ title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
+ the reverse holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
+ method takes one argument, <var title="">text</var>. When the method
+ is invoked, the user agent must replace all the <a href=#space-character title="space
+ character">space characters</a> in <var title="">text</var> with
+ U+0020 SPACE characters, and then must form a hypothetical
+ infinitely-wide CSS line box containing a single inline box
+ containing the text <var title="">text</var>, with all the
+ properties at their initial values except the 'white-space' property
+ of the inline element set to 'pre' and the 'font' property of the
+ inline element set to the current font of the context as given by
+ the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
+ must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
+ <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
+ the width of that inline box, in CSS pixels.
+<!--ADD-TOPIC:Security-->
+ If doing these measurements requires using a font that has an
+ <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
+ origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
+ owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
+ just checking if that font has a particular glyph in it before
+ falling back to another font), then the method must throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception.
+<!--REMOVE-TOPIC:Security-->
+ Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
+ <a href=#refsCSS>[CSS]</a></p>
+
+ <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
+ returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
+ attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
+ by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
+ method.</p>
+
+ <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
+ of the box given by the font size (the em square size) and the width
+ returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
+ width). This version of the specification does not provide a way to
+ obtain the bounding box dimensions of the text. If the text is to be
+ rendered and removed, care needs to be taken to replace the entire
+ area of the canvas that the clipping region covers, not just the box
+ given by the em square height and measured text width.</p>
+
+ </div>
+
+ <p class=note>A future version of the 2D context API may provide a
+ way to render fragments of documents, rendered using CSS, straight
+ to the canvas. This would be provided in preference to a dedicated
+ way of doing multiline layout.</p>
+
+
+
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</h6>
+
<p>The context always has a current default path. There is only one
current default path, it is not part of the <a href=#drawing-state>drawing
- state</a>. The current default path is a <a href=#path>path</a>, as
- described in the previous section.</p>
+ state</a>. The current default path is a <a href=#concept-path title=concept-path>path</a>, as described in the previous
+ section.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
@@ -36566,462 +37443,8 @@
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</h6>
-
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
-
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class=impl>
-
- <p>The <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
- </div>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
- or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
-
- <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
-
- <dd>
-
- <p>Fills or strokes (respectively) the given text at the given
- position. If a maximum width is provided, the text will be scaled
- to fit that width if necessary.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
-
- <dd>
-
- <p>Returns the advance width of the text that was passed to the
- <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
- method.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
- following methods for rendering text directly to the canvas.</p>
-
- <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
- <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
- than <var title="">maxWidth</var> if specified, using the current
- <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol><li><p>If <var title="">maxWidth</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>
-
- <li><p>Replace all the <a href=#space-character title="space character">space
- characters</a> in <var title="">text</var> with U+0020 SPACE
- characters.</li>
-
- <li><p>Form a hypothetical infinitely wide CSS line box containing
- a single inline box containing the text <var title="">text</var>,
- with all the properties at their initial values except the 'font'
- property of the inline box set to <var title="">font</var>, the
- 'direction' property of the inline box set to <a href=#the-directionality>the
- directionality</a> of the <code><a href=#the-canvas-element>canvas</a></code> element, and the
- 'white-space' property set to 'pre'. <a href=#refsCSS>[CSS]</a></li>
-
- <!-- if you insert a step here, make sure to adjust the next step's
- final words -->
-
- <li><p>If the <var title="">maxWidth</var> argument was specified
- and the hypothetical width of the inline box in the hypothetical
- line box is greater than <var title="">maxWidth</var> CSS pixels,
- then change <var title="">font</var> to have a more condensed font
- (if one is available or if a reasonably readable one can be
- synthesized by applying a horizontal scale factor to the font) or a
- smaller font, and return to the previous step.</li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the
- inline box, determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values, as
- follows:</p>
-
- <p>Horizontal position:</p>
-
- <dl><dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">left</code></dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the left edge of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">right</code></dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the right edge of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be half way between the left and right edges of the
- inline box.</dd>
-
- </dl><p>Vertical position:</p>
-
- <dl><dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the top of the em box of the first available font of the
- inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the hanging baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the bottom and the top of the em box of the
- first available font of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the alphabetic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the ideographic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the bottom of the em box of the first available font of the
- inline box.</dd>
-
- </dl></li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>, and anchored and sized so that before applying the
- <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>, the <var title="">anchor point</var> is at (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>
- <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
- applied to the glyphs and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> the reverse
- holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- applied to the glyph outlines and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
- </li>
-
- </ol><!--v6DVT - this is commented out until CSS can get its act together
-enough to actual specify vertical text rendering (how long have we
-been waiting now?)
-
-WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
-
- <p>The <dfn
- title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
- and <dfn
- title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var
- title="">x</var>, <var title="">y</var>, and optionally <var
- title="">maxHeight</var>, and render the given <var
- title="">text</var> as vertical text at the given (<var
- title="">x</var>, <var title="">y</var>) coordinates ensuring that
- the text isn't taller than <var title="">maxHeight</var> if
- specified, using the current <code
- title="dom-context-2d-font">font</code> and <code
- title="dom-context-2d-textAlign">textAlign</code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol>
-
- <li><p>If <var title="">maxHeight</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</p></li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code
- title="dom-context-2d-font">font</code> attribute.</p></li>
-
- <li><p>Replace all the <span title="space character">space
- characters</span> in <var title="">text</var> with U+0020 SPACE
- characters.</p></li>
-
- <li><p>Form a <em class="XXX">whatever CSS ends up calling
- vertical line boxes and inline boxes</em> containing the text <var
- title="">text</var>, with all the properties at their initial
- values except the 'font' property of the inline box set to <var
- title="">font</var> and the 'direction' property of the inline
- box set to <span>the directionality</span> of the <code>canvas</code>
- element.</p></li>
-
- <!- - if you insert a step here, make sure to adjust the next step's
- final words - ->
-
- <li><p>If the <var title="">maxHeight</var> argument was specified
- and the hypothetical height of the <em class="XXX">box</em>
- in the hypothetical line box is greater than <var
- title="">maxHeight</var> CSS pixels, then change <var
- title="">font</var> to have a more condensed font (if one is
- available or if a reasonably readable one can be synthesized by
- applying an appropriate scale factor to the font) or a smaller
- font, and return to the previous step.</p></li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the <em
- class="XXX">inline box</var>, determined by the <code
- title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
-
- <p>Vertical position:</p>
-
- <dl>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">start</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the top edge of the <em class="XXX">inline
- box</em>.</dd>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">end</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the bottom edge of the <em class="XXX">inline
- box</em>.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the top and bottom edges of the <em
- class="XXX">inline box</em>.</dd>
-
- </dl>
-
- <p>Let the horizontal position be half way between the left and
- right edges of the em box of the first available font of the <em
- class="XXX">inline box</em>.</p>
-
- </li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span>, and anchored and sized so that before applying the
- <span title="dom-context-2d-transformation">current transformation
- matrix</span>, the <var title="">anchor point</var> is at (<var
- title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code
- title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
- <code title="dom-context-2d-fillStyle">fillStyle</code> must be
- applied and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- ignored. For <code
- title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
- the reverse holds and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- applied and <code
- title="dom-context-2d-fillStyle">fillStyle</code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <span title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, the <span
- title="clipping region">clipping region</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
- </li>
-
- </ol>
-
-v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <a href=#space-character title="space
- character">space characters</a> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
- must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
- <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
- the width of that inline box, in CSS pixels.
-<!--ADD-TOPIC:Security-->
- If doing these measurements requires using a font that has an
- <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
- owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
- just checking if that font has a particular glyph in it before
- falling back to another font), then the method must throw a
- <code><a href=#securityerror>SecurityError</a></code> exception.
-<!--REMOVE-TOPIC:Security-->
- Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
- <a href=#refsCSS>[CSS]</a></p>
-
- <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
- returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
- attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
- by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
- method.</p>
-
- <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
- of the box given by the font size (the em square size) and the width
- returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
- width). This version of the specification does not provide a way to
- obtain the bounding box dimensions of the text. If the text is to be
- rendered and removed, care needs to be taken to replace the entire
- area of the canvas that the clipping region covers, not just the box
- given by the em square height and measured text width.</p>
-
- <!-- v5: Drawing text along a given path -->
- <!-- v5: Adding text to a path -->
- <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
- <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
-
- </div>
-
- <p class=note>A future version of the 2D context API may provide a
- way to render fragments of documents, rendered using CSS, straight
- to the canvas. This would be provided in preference to a dedicated
- way of doing multiline layout.</p>
-
-
-
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</h6>
-
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37164,7 +37587,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.11 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -37500,7 +37923,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.12 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.1.13 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -37662,7 +38085,7 @@
- <h6 id=shadows><span class=secno>4.8.11.1.13 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.1.14 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -37803,7 +38226,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.14 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.15 </span><dfn>Drawing model</dfn></h6>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -37834,7 +38257,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.15 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.16 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -37896,7 +38319,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.16 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.17 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: index
===================================================================
--- index 2012-03-07 22:53:20 UTC (rev 7022)
+++ index 2012-03-09 23:58:48 UTC (rev 7023)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 7 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 9 March 2012</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>
@@ -603,17 +603,18 @@
<li><a href=#line-styles><span class=secno>4.8.11.1.3 </span>Line styles</a></li>
<li><a href=#text-styles><span class=secno>4.8.11.1.4 </span>Text styles</a></li>
<li><a href=#building-paths><span class=secno>4.8.11.1.5 </span>Building paths</a></li>
- <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</a></li>
- <li><a href=#the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</a></li>
+ <li><a href=#path-objects><span class=secno>4.8.11.1.6 </span><code>Path</code> objects</a></li>
+ <li><a href=#fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</a></li>
<li><a href=#drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</a></li>
<li><a href=#drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</a></li>
- <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
- <li><a href=#compositing><span class=secno>4.8.11.1.12 </span>Compositing</a></li>
- <li><a href=#shadows><span class=secno>4.8.11.1.13 </span>Shadows</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.14 </span>Drawing model</a></li>
- <li><a href=#best-practices><span class=secno>4.8.11.1.15 </span>Best practices</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.16 </span>Examples</a></ol></li>
+ <li><a href=#drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</a></li>
+ <li><a href=#drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#compositing><span class=secno>4.8.11.1.13 </span>Compositing</a></li>
+ <li><a href=#shadows><span class=secno>4.8.11.1.14 </span>Shadows</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.15 </span>Drawing model</a></li>
+ <li><a href=#best-practices><span class=secno>4.8.11.1.16 </span>Best practices</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.17 </span>Examples</a></ol></li>
<li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
<li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
<li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
@@ -35001,8 +35002,22 @@
readonly attribute unsigned long <a href=#dom-imagedata-width title=dom-imagedata-width>width</a>;
readonly attribute unsigned long <a href=#dom-imagedata-height title=dom-imagedata-height>height</a>;
readonly attribute <a href=#uint8clampedarray>Uint8ClampedArray</a> <a href=#dom-imagedata-data title=dom-imagedata-data>data</a>;
-};</pre>
+};
+[<a href=#dom-path title=dom-Path>Constructor</a>(optional <a href=#element>Element</a> scope)]
+interface <dfn id=path>Path</dfn> {
+ void <a href=#dom-path-addfill title=dom-path-addFill>addFill</a>(<a href=#path>Path</a> path);
+ void <a href=#dom-path-addstroke title=dom-path-addStroke>addStroke</a>(<a href=#path>Path</a> path);
+ void <span title=dom-path-addFillText>addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title=dom-path-addFillText>addFillText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+ void <span title=dom-path-addStrokeText>addStrokeText</span>(DOMString text, <a href=#path>Path</a> path, optional double maxWidth);
+};
+<a href=#path>Path</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
+<a href=#path>Path</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#path>Path</a> implements <a href=#canvaspathmethods>CanvasPathMethods</a>;
+<a href=#path>Path</a> implements <a href=#canvastext>CanvasText</a>;</pre>
+
<!-- ARC-ORDER note (see above):
some demos rely on the precise order of the arc() and arcTo()
methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
@@ -35064,6 +35079,10 @@
no way to know which is the "element in question" at the time that
the color is specified.</p>
+ <p class=note>Similar concerns exist with font-related properties;
+ the rules for those are described in detail in the relevant section
+ below.</p>
+
</div>
@@ -35154,6 +35173,7 @@
</div>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-scale><a href=#dom-context-2d-scale>scale</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35162,6 +35182,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-rotate><a href=#dom-context-2d-rotate>rotate</a></code>(<var title="">angle</var>)</dt>
<dd>
@@ -35170,6 +35191,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-translate><a href=#dom-context-2d-translate>translate</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35178,6 +35200,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-transform><a href=#dom-context-2d-transform>transform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -35186,6 +35209,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-setTransform><a href=#dom-context-2d-settransform>setTransform</a></code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -35248,6 +35272,7 @@
<h6 id=line-styles><span class=secno>4.8.11.1.3 </span>Line styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35259,6 +35284,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35273,6 +35299,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35287,6 +35314,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35431,6 +35459,7 @@
<h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35446,6 +35475,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35458,6 +35488,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -35471,9 +35502,13 @@
</dl><div class=impl>
- <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <p>Objects that implement the <code><a href=#canvastext>CanvasText</a></code> interface have
+ attributes (defined in this section) that control how text is laid
+ out (rasterized or outlined) by the object. Such objects also have a
+ <dfn id=font-style-source-node>font style source node</dfn>. For
+ <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects, this is the
+ <code><a href=#the-canvas-element>canvas</a></code> element. For <code><a href=#path>Path</a></code> objects, it's the
+ <a href=#path-scope-node>path scope node</a>.</p>
<p>The <dfn id=dom-context-2d-font title=dom-context-2d-font><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -35487,15 +35522,16 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href=#refsCSS>[CSS]</a></p>
- <p>Font names must be interpreted in the context of the
- <code><a href=#the-canvas-element>canvas</a></code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
+ <p>Font names must be interpreted in the context of the <a href=#font-style-source-node>font
+ style source node</a>'s stylesheets when the font is to be used;
+ any fonts embedded using <code title="">@font-face</code> that are
+ visible to that element must therefore be available once they are
+ loaded. (If a reference font is used before it is fully loaded, or
+ if the <a href=#font-style-source-node>font style source node</a> does not have that font
+ in scope at the time the font is to be used, then it must be treated
+ as if it was an unknown font, falling back to another as described
+ by the relevant CSS specifications.) <a href=#refsCSSFONTS>[CSSFONTS]</a></p>
- <!-- XXX Path objects don't have a canvas -->
-
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
make the font look very ugly.</p>
@@ -35524,17 +35560,20 @@
sans-serif. When the 'font-size' component is set to lengths using
percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code><a href=#the-canvas-element>canvas</a></code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code><a href=#the-canvas-element>canvas</a></code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code><a href=#the-canvas-element>canvas</a></code> element is not <a href=#in-a-document>in a
+
+
+ of the 'font-size' property of the <a href=#font-style-source-node>font style source
+ node</a> at the time that the attribute is set, if that is an
+ element. When the 'font-weight' component is set to the relative
+ values 'bolder' and 'lighter', these must be interpreted relative to
+ the computed value of the 'font-weight' property of the <a href=#font-style-source-node>font
+ style source node</a> at the time that the attribute is set, if
+ that is an element. If the computed values are undefined for a
+ particular case (e.g. because the <a href=#font-style-source-node>font style source
+ node</a> is not an element or is not <a href=#in-a-document>in a
<code>Document</code></a>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
+ default.</p>
<p>The <dfn id=dom-context-2d-textalign title=dom-context-2d-textAlign><code>textAlign</code></dfn> IDL
attribute, on getting, must return the current value. On setting, if
@@ -35584,22 +35623,195 @@
<dt><dfn id=dom-context-2d-textbaseline-bottom title=dom-context-2d-textBaseline-bottom><code>bottom</code></dfn>
<dd>The bottom of the em square</dd>
- </dl><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
+ </dl><p>The <dfn id=text-preparation-algorithm>text preparation algorithm</dfn> is as follows. It takes
+ as input a string <var title="">text</var>, a
+ <code><a href=#canvastext>CanvasText</a></code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of
+ glyph shapes, each positioned on a common coordinate space, and a
+ <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i><a href=#center>center</a></i>. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var>.)</p>
+ <ol><li><p>If <var title="">maxWidth</var> was provided but is less
+ than or equal to zero, return an empty array.</li>
+
+ <li><p>Replace all the <a href=#space-character title="space character">space
+ characters</a> in <var title="">text</var> with U+0020 SPACE
+ characters.</li>
+
+ <li><p>Let <var title="">font</var> be the current font of <var title="">target</var>, as given by that object's <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>
+
+ <li>
+
+ <p>Apply the appropriate step from the following list to determine
+ the value of <var title="">direction</var>:</p>
+
+ <dl class=switch><dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is an element</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
+ directionality</a> of the <var title="">target</var> object's
+ <a href=#font-style-source-node>font style source node</a>.</dd>
+
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is a <code><a href=#document>Document</a></code> and that
+ <code><a href=#document>Document</a></code> has a root element child</dt>
+
+ <dd>Let <var title="">direction</var> be <a href=#the-directionality>the
+ directionality</a> of the <var title="">target</var> object's
+ <a href=#font-style-source-node>font style source node</a>'s root element child.</dd>
+
+ <dt>If the <var title="">target</var> object's <a href=#font-style-source-node>font style
+ source node</a> is a <code><a href=#document>Document</a></code> and that
+ <code><a href=#document>Document</a></code> has no root element child</dt>
+
+ <dd>Let <var title="">direction</var> be '<a href=#concept-ltr title=concept-ltr>ltr</a>'.</dd>
+
+ </dl></li>
+
+ <li><p>Form a hypothetical infinitely-wide CSS line box containing
+ a single inline box containing the text <var title="">text</var>,
+ with all the properties at their initial values except the 'font'
+ property of the inline box set to <var title="">font</var>, the
+ 'direction' property of the inline box set to <var title="">direction</var>, and the 'white-space' property set to
+ 'pre'. <a href=#refsCSS>[CSS]</a></li>
+
+ <!-- if you insert a step here, make sure to adjust the next step's
+ final words -->
+
+ <li><p>If <var title="">maxWidth</var> was provided and the
+ hypothetical width of the inline box in the hypothetical line box
+ is greater than <var title="">maxWidth</var> CSS pixels, then
+ change <var title="">font</var> to have a more condensed font (if
+ one is available or if a reasonably readable one can be synthesized
+ by applying a horizontal scale factor to the font) or a smaller
+ font, and return to the previous step.</li>
+
+ <li>
+
+ <p>The <var title="">anchor point</var> is a point on the inline
+ box, and the <var title="">physical alignment</var> is one of the
+ values <i>left</i>, <i>right</i>, and <i><a href=#center>center</a></i>. These
+ variables are determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values as
+ follows:</p>
+
+ <p>Horizontal position:</p>
+
+ <dl><dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">left</code></dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the left edge of the inline box, and let <var title="">physical alignment</var> be <i>left</i>.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">right</code></dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the right edge of the inline box, and let <var title="">physical alignment</var> be <i>right</i>.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is
+ <code title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be half way between the left and right edges of the
+ inline box, and let <var title="">physical alignment</var> be
+ <i><a href=#center>center</a></i>.</dd>
+
+ </dl><p>Vertical position:</p>
+
+ <dl><dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the top of the em box of the first available font of the
+ inline box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the hanging baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the bottom and the top of the em box of the
+ first available font of the inline box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the alphabetic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the ideographic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the bottom of the em box of the first available font of the
+ inline box.</dd>
+
+ </dl></li>
+
+ <li>
+
+ <p>Let <var title="">result</var> be an array constructed by
+ iterating over each glyph in the inline box from left to right (if
+ any), adding to the array, for each glyph, the shape of the glyph
+ as it is in the inline box, positioned on a coordinate space using
+ CSS pixels with its origin is at the <var title="">anchor
+ point</var>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">result</var>, and, for callers that
+ need it, <var title="">physical alignment</var> as the alignment
+ value.</li>
+
+ </ol><h6 id=building-paths><span class=secno>4.8.11.1.5 </span>Building paths</h6>
+
<p>Each object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
- interface has a <a href=#path>path</a>. A <dfn id=path>path</dfn> has a list of
- zero or more subpaths. Each subpath consists of a list of one or
- more points, connected by straight or curved lines, and a flag
- indicating whether the subpath is closed or not. A closed subpath is
- one where the last point of the subpath is connected to the first
- point of the subpath by a straight line. Subpaths with fewer than
- two points are ignored when painting the path.</p>
+ interface has a <a href=#concept-path title=concept-path>path</a>. A <dfn id=concept-path title=concept-path>path</dfn> has a list of zero or more subpaths.
+ Each subpath consists of a list of one or more points, connected by
+ straight or curved lines, and a flag indicating whether the subpath
+ is closed or not. A closed subpath is one where the last point of
+ the subpath is connected to the first point of the subpath by a
+ straight line. Subpaths with fewer than two points are ignored when
+ painting the path.</p>
<p>When an object implementing the <code><a href=#canvaspathmethods>CanvasPathMethods</a></code>
- interface is created, its <a href=#path>path</a> must be initialized to
- zero subpaths.</p>
+ interface is created, its <a href=#concept-path title=concept-path>path</a>
+ must be initialized to zero subpaths.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35608,6 +35820,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-closePath><a href=#dom-context-2d-closepath>closePath</a></code>()</dt>
<dd>
@@ -35616,6 +35829,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-lineTo><a href=#dom-context-2d-lineto>lineTo</a></code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35624,6 +35838,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-quadraticCurveTo><a href=#dom-context-2d-quadraticcurveto>quadraticCurveTo</a></code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35632,6 +35847,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-bezierCurveTo><a href=#dom-context-2d-beziercurveto>bezierCurveTo</a></code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -35640,6 +35856,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-arcTo><a href=#dom-context-2d-arcto>arcTo</a></code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
<dd>
@@ -35653,6 +35870,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
<dd>
@@ -35668,6 +35886,7 @@
</dd>
<dt><var title="">context</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-context-2d-rect><a href=#dom-context-2d-rect>rect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
@@ -35677,11 +35896,11 @@
</dl><div class=impl>
- <p>The following methods allow authors to manipulate the <a href=#path title=path>paths</a> of objects implementing the
+ <p>The following methods allow authors to manipulate the <a href=#concept-path title=concept-path>paths</a> of objects implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface.</p>
- <p>The points and lines added to an object's <a href=#path>path</a> by
- these methods must be transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ <p>The points and lines added to an object's <a href=#concept-path title=concept-path>path</a> by these methods must be
+ transformed according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
matrix</a> of the object implementing the
<code><a href=#canvaspathmethods>CanvasPathMethods</a></code> interface before they are added to
the path.</p>
@@ -35698,11 +35917,12 @@
<p>When the user agent is to <dfn id=ensure-there-is-a-subpath>ensure there is a subpath</dfn>
for a coordinate (<var title="">x</var>, <var title="">y</var>) on a
- <a href=#path>path</a>, the user agent must check to see if the
- <a href=#path>path</a> has any subpaths, and if it does not, then the
- user agent must create a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as its first (and only)
- point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code>
- method had been called.</p>
+ <a href=#concept-path title=concept-path>path</a>, the user agent must check to
+ see if the <a href=#concept-path title=concept-path>path</a> has any subpaths,
+ and if it does not, then the user agent must create a new subpath
+ with the point (<var title="">x</var>, <var title="">y</var>) as its
+ first (and only) point, as if the <code title=dom-context-2d-moveTo><a href=#dom-context-2d-moveto>moveTo()</a></code> method had been
+ called.</p>
<p>The <dfn id=dom-context-2d-closepath title=dom-context-2d-closePath><code>closePath()</code></dfn>
@@ -35834,9 +36054,314 @@
+ <h6 id=path-objects><span class=secno>4.8.11.1.6 </span><code><a href=#path>Path</a></code> objects</h6>
- <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.6 </span>Fill and stroke styles</h6>
+ <p><code><a href=#path>Path</a></code> objects can be used to declare paths that are
+ then later used on <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> objects. In
+ addition to many of the APIs described in earlier sections,
+ <code><a href=#path>Path</a></code> objects have methods to combine paths, and to add
+ text to paths.</p>
+ <dl class=domintro><dt><var title="">path</var> = new <code title=dom-path><a href=#dom-path>Path</a></code>([ <var title="">element</var> ])</dt>
+
+ <dd>
+
+ <p>Creates a new <code><a href=#path>Path</a></code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title=dom-path-addFill><a href=#dom-path-addfill>addFill</a></code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStroke><a href=#dom-path-addstroke>addStroke</a></code>(<var title="">path</var>)</dt>
+
+ <dd>
+
+ <p>Adds to the path the path given by the argument.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title=dom-path-addFillText>addFillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addFillText>addFillText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStrokeText>addStrokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title=dom-path-addStrokeText>addStrokeText</code>(<var title="">text</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>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>Each <code><a href=#path>Path</a></code> object has a <dfn id=path-scope-node>path scope node</dfn>.</p>
+
+ <p>The <dfn id=dom-path title=dom-path><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code><a href=#path>Path</a></code> object.
+ If the constructor was passed an argument, then the
+ <code><a href=#path>Path</a></code> object's <a href=#path-scope-node>path scope node</a> is that
+ element. Otherwise, the object's <a href=#path-scope-node>path scope node</a> is
+ the <code><a href=#document>Document</a></code> object of the <a href=#active-document>active
+ document</a> of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the interface object of the
+ invoked constructor is found.</p>
+
+ <p>The <dfn id=dom-path-addfill title=dom-path-addFill><code>addFill(<var title="">b</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><a href=#path>Path</a></code> object <var title="">b</var> has
+ no subpaths, abort these steps.</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>.</li>
+
+ <li><p>Transform all the coordinates in <var title="">c</var> by
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> of <var title="">a</var>.</li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ last point in the last subpath of <var title="">c</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">c</var> to <var title="">a</var>.</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
+ subpath.</li>
+
+ </ol><p>The <dfn id=dom-path-addstroke title=dom-path-addStroke><code>addStroke(<var title="">b</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><a href=#path>Path</a></code> object <var title="">b</var> has
+ no subpaths, abort these steps.</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>.</li>
+
+ <li><p>Transform all the coordinates in <var title="">c</var> by
+ the <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> of <var title="">a</var>.</li>
+
+ <li><p>Create a new list of subpaths <var title="">d</var>,
+ consisting of the subpaths necessary to describe the result of
+ tracing the subpaths in <var title="">c</var>, in the same order,
+ while applying the line styles of <var title="">a</var> (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ Subpaths in <var title="">d</var> must wind clockwise, regardless
+ of the direction of paths in <var title="">c</var>.</p>
+
+ <!--
+
+ Because both of these examples result in two lines (assuming
+ non-zero winding rules, things are different under even/odd),
+ there's no "hole" where the lines overlap:
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.stroke();
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.lineTo(300,300);
+ c.closePath();
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.lineTo(300,300);
+ c.closePath();
+ c.stroke();
+
+ ...and we want the same result when you create the two subpaths
+ in each example above as two Paths, stroke them onto a third
+ Path, and then fill that Path on the context.
+
+ -->
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ last point in the last subpath of <var title="">d</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">d</var> to <var title="">a</var>.</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
+ subpath.</li>
+
+ </ol><p>The <dfn id=dom-context-2d-addfilltext title=dom-context-2d-addFillText><code>addFillText()</code></dfn> and
+ <dfn id=dom-context-2d-addstroketext title=dom-context-2d-addStrokeText><code>addStrokeText()</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, a maximum width can optionally be provided.</p>
+
+ <p>When one of the <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</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 <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href=#path>Path</a></code> object, 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.</li>
+
+ <li><p>Let <var title="">glyph subpaths</var> be a list of subpaths
+ 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
+ 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-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <code><a href=#path>Path</a></code> object (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also all
+ wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> of the <code><a href=#path>Path</a></code> object.</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="">glyph subpaths</var>.</li>
+
+ <li><p>Add all the subpaths in <var title="">glyph
+ subpaths</var> to the <code><a href=#path>Path</a></code> object.</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 the
+ subpath.</li>
+
+ </ol><p>When one of the <code title=dom-context-2d-addFillText><a href=#dom-context-2d-addfilltext>addFillText()</a></code> and <code title=dom-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</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><a href=#path>Path</a></code>
+ object on which the method was invoked.</li>
+
+ <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.</li>
+
+ <li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, <var title="">target</var>, 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
+ 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.</li>
+
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ for of all the subpaths in <var title="">path</var>, with
+ additional lines drawn between the last point and the first point
+ of each closed subpath, such that the first point of the first
+ subpath is defined as point 0, and the last point of the last
+ subpath, if the last subpath is not closed, or the second
+ occurrence first point of that subpath, if it is closed, is defined
+ as point <var title="">width</var>.</li>
+
+ <li>
+
+ <p>Let <var title="">offset</var> be determined according to the
+ appropriate step below:</p>
+
+ <dl class=switch><dt>If <var title="">physical alignment</var> is <i>left</i></dt>
+ <dd>Let <var title="">offset</var> be zero.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i>right</i></dt>
+ <dd>Let <var title="">offset</var> be <var title="">width</var>.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i><a href=#center>center</a></i></dt>
+ <dd>Let <var title="">offset</var> be half of <var title="">width</var>.</dd>
+
+ </dl></li>
+
+ <li><p>Move all the shapes in <var title="">glyphs</var> to the
+ right by <var title="">offset</var> CSS pixels.</li>
+
+ <li>
+
+ <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.</li>
+
+ <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.</li>
+
+ <li><p>Recast <var title="">dx</var> to coordinate spaces units
+ in <var title="">path</var>. (This just changes the
+ dimensionality of <var title="">dx</var>, not its numeric
+ value.)</p> <!-- hide this step if people get confused by the
+ pedancy -->
+
+ <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
+ 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
+ at point <var title="">p</var>.</li>
+
+ <li><p>Rotate the shape described by <var title="">glyph</var>
+ clockwise by <var title="">θ</var> about the point that is
+ at the <var title="">dx</var> coordinate horizontally and the
+ zero coordinate vertically.</li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ coordinate of the point <var title="">p</var>.</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>.</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
+ 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-context-2d-addStrokeText><a href=#dom-context-2d-addstroketext>addStrokeText()</a></code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <var title="">target</var> object
+ (the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>,
+ <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also
+ all wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a> of <var title="">target</var>.</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="">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="">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 the
+ subpath.</li>
+
+ </ol></div>
+
+
+ <h6 id=fill-and-stroke-styles><span class=secno>4.8.11.1.7 </span>Fill and stroke styles</h6>
+
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -36227,12 +36752,364 @@
- <h6 id=the-current-default-path><span class=secno>4.8.11.1.7 </span>The current default path</h6>
+ <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
+
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
+
+ <div class=impl>
+
+ <p>The <a href=#transformations title=dom-context-2d-transformation>current
+ transformation matrix</a> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
+
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <a href=#clipping-region title="clipping region">clipping
+ region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
+
+ </div>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
+
+ <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
+ or width are zero, this method has no effect.</p>
+
+ <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
+
+ </div>
+
+
+
+ <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
+
+ <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+ <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+
+ <dd>
+
+ <p>Fills or strokes (respectively) the given text at the given
+ position. If a maximum width is provided, the text will be scaled
+ to fit that width if necessary.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
+
+ <dd>
+
+ <p>Returns the advance width of the text that was passed to the
+ <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
+ method.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
+ following methods for rendering text directly to the canvas.</p>
+
+ <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
+ <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
+ than <var title="">maxWidth</var> if specified, using the current
+ <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol><li><p>Run the <a href=#text-preparation-algorithm>text preparation algorithm</a>, passing it
+ <var title="">text</var>, the <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code>
+ object, 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.</li>
+
+ <li>
+
+ <p>Paint the shapes given in <var title="">glyphs</var>, as
+ transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a>, with each CSS pixel in the coordinate space of <var title="">glyphs</var> mapped to one coordinate space unit.</p>
+
+ <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>,
+ <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
+ applied to the shapes and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
+ ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code>, the reverse
+ holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
+ applied to the shape outlines, along with the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
+ appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes,
+ and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must
+ be ignored.</p>
+
+ <p>These shapes are painted without affecting the current path,
+ and are subject to <a href=#shadows title=shadows>shadow effects</a>,
+ <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the
+ <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>.</p>
+
+ </li>
+
+ </ol><!--v6DVT - this is commented out until CSS can get its act together
+enough to actual specify vertical text rendering (how long have we
+been waiting now?)
+
+WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
+
+ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
+HAVE REJIGGED HOW TEXT WORKS IN v5
+
+ <p>The <dfn
+ title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
+ and <dfn
+ title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxHeight</var>, and render the given <var
+ title="">text</var> as vertical text at the given (<var
+ title="">x</var>, <var title="">y</var>) coordinates ensuring that
+ the text isn't taller than <var title="">maxHeight</var> if
+ specified, using the current <code
+ title="dom-context-2d-font">font</code> and <code
+ title="dom-context-2d-textAlign">textAlign</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">maxHeight</var> is present but less than or
+ equal to zero, return without doing anything; abort these
+ steps.</p></li>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a <em class="XXX">whatever CSS ends up calling
+ vertical line boxes and inline boxes</em> containing the text <var
+ title="">text</var>, with all the properties at their initial
+ values except the 'font' property of the inline box set to <var
+ title="">font</var> and the 'direction' property of the inline
+ box set to <span>the directionality</span> of the <code>canvas</code>
+ element.</p></li>
+
+ <!- - if you insert a step here, make sure to adjust the next step's
+ final words - ->
+
+ <li><p>If the <var title="">maxHeight</var> argument was specified
+ and the hypothetical height of the <em class="XXX">box</em>
+ in the hypothetical line box is greater than <var
+ title="">maxHeight</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is
+ available or if a reasonably readable one can be synthesized by
+ applying an appropriate scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the <em
+ class="XXX">inline box</var>, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the top edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the bottom edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the top and bottom edges of the <em
+ class="XXX">inline box</em>.</dd>
+
+ </dl>
+
+ <p>Let the horizontal position be half way between the left and
+ right edges of the em box of the first available font of the <em
+ class="XXX">inline box</em>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code
+ title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
+ the reverse holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
+ method takes one argument, <var title="">text</var>. When the method
+ is invoked, the user agent must replace all the <a href=#space-character title="space
+ character">space characters</a> in <var title="">text</var> with
+ U+0020 SPACE characters, and then must form a hypothetical
+ infinitely-wide CSS line box containing a single inline box
+ containing the text <var title="">text</var>, with all the
+ properties at their initial values except the 'white-space' property
+ of the inline element set to 'pre' and the 'font' property of the
+ inline element set to the current font of the context as given by
+ the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
+ must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
+ <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
+ the width of that inline box, in CSS pixels.
+<!--ADD-TOPIC:Security-->
+ If doing these measurements requires using a font that has an
+ <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
+ origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
+ owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
+ just checking if that font has a particular glyph in it before
+ falling back to another font), then the method must throw a
+ <code><a href=#securityerror>SecurityError</a></code> exception.
+<!--REMOVE-TOPIC:Security-->
+ Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
+ <a href=#refsCSS>[CSS]</a></p>
+
+ <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
+ returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
+ attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
+ by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
+ method.</p>
+
+ <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
+ of the box given by the font size (the em square size) and the width
+ returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
+ width). This version of the specification does not provide a way to
+ obtain the bounding box dimensions of the text. If the text is to be
+ rendered and removed, care needs to be taken to replace the entire
+ area of the canvas that the clipping region covers, not just the box
+ given by the em square height and measured text width.</p>
+
+ </div>
+
+ <p class=note>A future version of the 2D context API may provide a
+ way to render fragments of documents, rendered using CSS, straight
+ to the canvas. This would be provided in preference to a dedicated
+ way of doing multiline layout.</p>
+
+
+
+ <h6 id=drawing-paths-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing paths to the canvas</h6>
+
<p>The context always has a current default path. There is only one
current default path, it is not part of the <a href=#drawing-state>drawing
- state</a>. The current default path is a <a href=#path>path</a>, as
- described in the previous section.</p>
+ state</a>. The current default path is a <a href=#concept-path title=concept-path>path</a>, as described in the previous
+ section.</p>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-beginPath><a href=#dom-context-2d-beginpath>beginPath</a></code>()</dt>
@@ -36566,462 +37443,8 @@
+ <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.11 </span>Drawing images to the canvas</h6>
-
- <h6 id=drawing-rectangles-to-the-canvas><span class=secno>4.8.11.1.8 </span>Drawing rectangles to the canvas</h6>
-
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class=impl>
-
- <p>The <a href=#transformations title=dom-context-2d-transformation>current
- transformation matrix</a> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <a href=#clipping-region title="clipping region">clipping
- region</a>, and, with the exception of <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect()</a></code>, also <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
- </div>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-clearRect><a href=#dom-context-2d-clearrect>clearRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-fillRect><a href=#dom-context-2d-fillrect>fillRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeRect><a href=#dom-context-2d-strokerect>strokeRect</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <dfn id=dom-context-2d-clearrect title=dom-context-2d-clearRect><code>clearRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-fillrect title=dom-context-2d-fillRect><code>fillRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code>. If either height
- or width are zero, this method has no effect.</p>
-
- <p>The <dfn id=dom-context-2d-strokerect title=dom-context-2d-strokeRect><code>strokeRect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code>, <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code>, <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code>, and (if
- appropriate) <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
-
- <h6 id=drawing-text-to-the-canvas><span class=secno>4.8.11.1.9 </span>Drawing text to the canvas</h6>
-
- <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
- <dt><var title="">context</var> . <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText</a></code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
-
- <dd>
-
- <p>Fills or strokes (respectively) the given text at the given
- position. If a maximum width is provided, the text will be scaled
- to fit that width if necessary.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> = <var title="">context</var> . <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText</a></code>(<var title="">text</var>)</dt>
-
- <dd>
-
- <p>Returns a <code><a href=#textmetrics>TextMetrics</a></code> object with the metrics of the given text in the current font.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> . <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code></dt>
-
- <dd>
-
- <p>Returns the advance width of the text that was passed to the
- <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
- method.</p>
-
- </dd>
-
- </dl><div class=impl>
-
- <p>The <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> interface provides the
- following methods for rendering text directly to the canvas.</p>
-
- <p>The <dfn id=dom-context-2d-filltext title=dom-context-2d-fillText><code>fillText()</code></dfn> and
- <dfn id=dom-context-2d-stroketext title=dom-context-2d-strokeText><code>strokeText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var title="">x</var>, <var title="">y</var>, and optionally <var title="">maxWidth</var>, and render the given <var title="">text</var> at the given (<var title="">x</var>, <var title="">y</var>) coordinates ensuring that the text isn't wider
- than <var title="">maxWidth</var> if specified, using the current
- <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code>, <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code>, and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol><li><p>If <var title="">maxWidth</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute.</li>
-
- <li><p>Replace all the <a href=#space-character title="space character">space
- characters</a> in <var title="">text</var> with U+0020 SPACE
- characters.</li>
-
- <li><p>Form a hypothetical infinitely wide CSS line box containing
- a single inline box containing the text <var title="">text</var>,
- with all the properties at their initial values except the 'font'
- property of the inline box set to <var title="">font</var>, the
- 'direction' property of the inline box set to <a href=#the-directionality>the
- directionality</a> of the <code><a href=#the-canvas-element>canvas</a></code> element, and the
- 'white-space' property set to 'pre'. <a href=#refsCSS>[CSS]</a></li>
-
- <!-- if you insert a step here, make sure to adjust the next step's
- final words -->
-
- <li><p>If the <var title="">maxWidth</var> argument was specified
- and the hypothetical width of the inline box in the hypothetical
- line box is greater than <var title="">maxWidth</var> CSS pixels,
- then change <var title="">font</var> to have a more condensed font
- (if one is available or if a reasonably readable one can be
- synthesized by applying a horizontal scale factor to the font) or a
- smaller font, and return to the previous step.</li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the
- inline box, determined by the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> and <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> values, as
- follows:</p>
-
- <p>Horizontal position:</p>
-
- <dl><dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">left</code></dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the left edge of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">right</code></dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">end</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'ltr'</dt>
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">start</code> and <a href=#the-directionality>the directionality</a> of the
- <code><a href=#the-canvas-element>canvas</a></code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the right edge of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> is <code title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be half way between the left and right edges of the
- inline box.</dd>
-
- </dl><p>Vertical position:</p>
-
- <dl><dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-top><a href=#dom-context-2d-textbaseline-top>top</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the top of the em box of the first available font of the
- inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-hanging><a href=#dom-context-2d-textbaseline-hanging>hanging</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the hanging baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-middle><a href=#dom-context-2d-textbaseline-middle>middle</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the bottom and the top of the em box of the
- first available font of the inline box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-alphabetic><a href=#dom-context-2d-textbaseline-alphabetic>alphabetic</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the alphabetic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the ideographic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> is <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the bottom of the em box of the first available font of the
- inline box.</dd>
-
- </dl></li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>, and anchored and sized so that before applying the
- <a href=#transformations title=dom-context-2d-transformation>current transformation
- matrix</a>, the <var title="">anchor point</var> is at (<var title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code>
- <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
- applied to the glyphs and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- ignored. For <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> the reverse
- holds and <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> must be
- applied to the glyph outlines and <code title=dom-context-2d-fillStyle><a href=#dom-context-2d-fillstyle>fillStyle</a></code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <a href=#shadows title=shadows>shadow effects</a>, <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, the <a href=#clipping-region title="clipping region">clipping region</a>, and <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
- operators</a>.</p>
-
- </li>
-
- </ol><!--v6DVT - this is commented out until CSS can get its act together
-enough to actual specify vertical text rendering (how long have we
-been waiting now?)
-
-WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
-
- <p>The <dfn
- title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
- and <dfn
- title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var
- title="">x</var>, <var title="">y</var>, and optionally <var
- title="">maxHeight</var>, and render the given <var
- title="">text</var> as vertical text at the given (<var
- title="">x</var>, <var title="">y</var>) coordinates ensuring that
- the text isn't taller than <var title="">maxHeight</var> if
- specified, using the current <code
- title="dom-context-2d-font">font</code> and <code
- title="dom-context-2d-textAlign">textAlign</code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol>
-
- <li><p>If <var title="">maxHeight</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</p></li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code
- title="dom-context-2d-font">font</code> attribute.</p></li>
-
- <li><p>Replace all the <span title="space character">space
- characters</span> in <var title="">text</var> with U+0020 SPACE
- characters.</p></li>
-
- <li><p>Form a <em class="XXX">whatever CSS ends up calling
- vertical line boxes and inline boxes</em> containing the text <var
- title="">text</var>, with all the properties at their initial
- values except the 'font' property of the inline box set to <var
- title="">font</var> and the 'direction' property of the inline
- box set to <span>the directionality</span> of the <code>canvas</code>
- element.</p></li>
-
- <!- - if you insert a step here, make sure to adjust the next step's
- final words - ->
-
- <li><p>If the <var title="">maxHeight</var> argument was specified
- and the hypothetical height of the <em class="XXX">box</em>
- in the hypothetical line box is greater than <var
- title="">maxHeight</var> CSS pixels, then change <var
- title="">font</var> to have a more condensed font (if one is
- available or if a reasonably readable one can be synthesized by
- applying an appropriate scale factor to the font) or a smaller
- font, and return to the previous step.</p></li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the <em
- class="XXX">inline box</var>, determined by the <code
- title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
-
- <p>Vertical position:</p>
-
- <dl>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">start</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the top edge of the <em class="XXX">inline
- box</em>.</dd>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">end</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the bottom edge of the <em class="XXX">inline
- box</em>.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the top and bottom edges of the <em
- class="XXX">inline box</em>.</dd>
-
- </dl>
-
- <p>Let the horizontal position be half way between the left and
- right edges of the em box of the first available font of the <em
- class="XXX">inline box</em>.</p>
-
- </li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span>, and anchored and sized so that before applying the
- <span title="dom-context-2d-transformation">current transformation
- matrix</span>, the <var title="">anchor point</var> is at (<var
- title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code
- title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
- <code title="dom-context-2d-fillStyle">fillStyle</code> must be
- applied and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- ignored. For <code
- title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
- the reverse holds and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- applied and <code
- title="dom-context-2d-fillStyle">fillStyle</code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <span title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, the <span
- title="clipping region">clipping region</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
- </li>
-
- </ol>
-
-v6DVT (also check for '- -' bits in the part above) --><p>The <dfn id=dom-context-2d-measuretext title=dom-context-2d-measureText><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <a href=#space-character title="space
- character">space characters</a> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> attribute, and
- must then create a new <code><a href=#textmetrics>TextMetrics</a></code> object with its
- <code title=dom-textmetrics-width><a href=#dom-textmetrics-width>width</a></code> attribute set to
- the width of that inline box, in CSS pixels.
-<!--ADD-TOPIC:Security-->
- If doing these measurements requires using a font that has an
- <a href=#origin>origin</a> that is not the <a href=#same-origin title="same
- origin">same</a> as that of the <code><a href=#document>Document</a></code> object that
- owns the <code><a href=#the-canvas-element>canvas</a></code> element (even if "using a font" means
- just checking if that font has a particular glyph in it before
- falling back to another font), then the method must throw a
- <code><a href=#securityerror>SecurityError</a></code> exception.
-<!--REMOVE-TOPIC:Security-->
- Otherwise, it must return the new <code><a href=#textmetrics>TextMetrics</a></code> object.
- <a href=#refsCSS>[CSS]</a></p>
-
- <p>The <code><a href=#textmetrics>TextMetrics</a></code> interface is used for the objects
- returned from <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>. It has one
- attribute, <dfn id=dom-textmetrics-width title=dom-textmetrics-width><code>width</code></dfn>, which is set
- by the <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code>
- method.</p>
-
- <p class=note>Glyphs rendered using <code title=dom-context-2d-fillText><a href=#dom-context-2d-filltext>fillText()</a></code> and <code title=dom-context-2d-strokeText><a href=#dom-context-2d-stroketext>strokeText()</a></code> can spill out
- of the box given by the font size (the em square size) and the width
- returned by <code title=dom-context-2d-measureText><a href=#dom-context-2d-measuretext>measureText()</a></code> (the text
- width). This version of the specification does not provide a way to
- obtain the bounding box dimensions of the text. If the text is to be
- rendered and removed, care needs to be taken to replace the entire
- area of the canvas that the clipping region covers, not just the box
- given by the em square height and measured text width.</p>
-
- <!-- v5: Drawing text along a given path -->
- <!-- v5: Adding text to a path -->
- <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
- <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
-
- </div>
-
- <p class=note>A future version of the 2D context API may provide a
- way to render fragments of documents, rendered using CSS, straight
- to the canvas. This would be provided in preference to a dedicated
- way of doing multiline layout.</p>
-
-
-
- <h6 id=drawing-images-to-the-canvas><span class=secno>4.8.11.1.10 </span>Drawing images to the canvas</h6>
-
<p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
can be used.</p>
@@ -37164,7 +37587,7 @@
- <h6 id=pixel-manipulation><span class=secno>4.8.11.1.11 </span><dfn>Pixel manipulation</dfn></h6>
+ <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
<dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
@@ -37500,7 +37923,7 @@
- <h6 id=compositing><span class=secno>4.8.11.1.12 </span>Compositing</h6>
+ <h6 id=compositing><span class=secno>4.8.11.1.13 </span>Compositing</h6>
<dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
@@ -37662,7 +38085,7 @@
- <h6 id=shadows><span class=secno>4.8.11.1.13 </span><dfn>Shadows</dfn></h6>
+ <h6 id=shadows><span class=secno>4.8.11.1.14 </span><dfn>Shadows</dfn></h6>
<p>All drawing operations are affected by the four global shadow
attributes.</p>
@@ -37803,7 +38226,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.14 </span><dfn>Drawing model</dfn></h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.15 </span><dfn>Drawing model</dfn></h6>
<p>When a shape or image is painted, user agents must follow these
steps, in the order given (or act as if they do):</p>
@@ -37834,7 +38257,7 @@
</ol></div>
- <h6 id=best-practices><span class=secno>4.8.11.1.15 </span>Best practices</h6>
+ <h6 id=best-practices><span class=secno>4.8.11.1.16 </span>Best practices</h6>
<p><i>This section is non-normative.</i></p>
@@ -37896,7 +38319,7 @@
attribute.</p>
- <h6 id=examples><span class=secno>4.8.11.1.16 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.17 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: source
===================================================================
--- source 2012-03-07 22:53:20 UTC (rev 7022)
+++ source 2012-03-09 23:58:48 UTC (rev 7023)
@@ -40681,8 +40681,22 @@
readonly attribute unsigned long <span title="dom-imagedata-width">width</span>;
readonly attribute unsigned long <span title="dom-imagedata-height">height</span>;
readonly attribute <span>Uint8ClampedArray</span> <span title="dom-imagedata-data">data</span>;
-};</pre>
+};
+[<span title="dom-Path">Constructor</span>(optional <span>Element</span> scope)]
+interface <dfn>Path</dfn> {
+ void <span title="dom-path-addFill">addFill</span>(<span>Path</span> path);
+ void <span title="dom-path-addStroke">addStroke</span>(<span>Path</span> path);
+ void <span title="dom-path-addFillText">addFillText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title="dom-path-addStrokeText">addStrokeText</span>(DOMString text, double x, double y, optional double maxWidth);
+ void <span title="dom-path-addFillText">addFillText</span>(DOMString text, <span>Path</span> path, optional double maxWidth);
+ void <span title="dom-path-addStrokeText">addStrokeText</span>(DOMString text, <span>Path</span> path, optional double maxWidth);
+};
+<span>Path</span> implements <span>CanvasTransformation</span>;
+<span>Path</span> implements <span>CanvasLineStyles</span>;
+<span>Path</span> implements <span>CanvasPathMethods</span>;
+<span>Path</span> implements <span>CanvasText</span>;</pre>
+
<!-- ARC-ORDER note (see above):
some demos rely on the precise order of the arc() and arcTo()
methods, see https://bugzilla.mozilla.org/show_bug.cgi?id=623437
@@ -40751,6 +40765,10 @@
no way to know which is the "element in question" at the time that
the color is specified.</p>
+ <p class="note">Similar concerns exist with font-related properties;
+ the rules for those are described in detail in the relevant section
+ below.</p>
+
</div>
@@ -40868,6 +40886,7 @@
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-scale">scale</code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -40876,6 +40895,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-rotate">rotate</code>(<var title="">angle</var>)</dt>
<dd>
@@ -40884,6 +40904,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-translate">translate</code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -40892,6 +40913,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-transform">transform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -40900,6 +40922,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-setTransform">setTransform</code>(<var title="">a</var>, <var title="">b</var>, <var title="">c</var>, <var title="">d</var>, <var title="">e</var>, <var title="">f</var>)</dt>
<dd>
@@ -40998,6 +41021,7 @@
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-lineWidth">lineWidth</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41009,6 +41033,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-lineCap">lineCap</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-lineCap">lineCap</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41023,6 +41048,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-lineJoin">lineJoin</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-lineJoin">lineJoin</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41037,6 +41063,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-miterLimit">miterLimit</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-miterLimit">miterLimit</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41200,6 +41227,7 @@
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41215,6 +41243,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-textAlign">textAlign</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41229,6 +41258,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-textBaseline">textBaseline</code> [ = <var title="">value</var> ]</dt>
<dd>
@@ -41244,9 +41274,13 @@
<div class="impl">
- <p>Objects that implement the <code>CanvasText</code>
- interface have attributes (defined in this section) that control how
- text is laid out (rasterized or outlined) by the object.</p>
+ <p>Objects that implement the <code>CanvasText</code> interface have
+ attributes (defined in this section) that control how text is laid
+ out (rasterized or outlined) by the object. Such objects also have a
+ <dfn>font style source node</dfn>. For
+ <code>CanvasRenderingContext2D</code> objects, this is the
+ <code>canvas</code> element. For <code>Path</code> objects, it's the
+ <span>path scope node</span>.</p>
<p>The <dfn title="dom-context-2d-font"><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
@@ -41260,16 +41294,17 @@
'initial'), then it must be ignored, without assigning a new font
value. <a href="#refsCSS">[CSS]</a></p>
- <p>Font names must be interpreted in the context of the
- <code>canvas</code> element's stylesheets; any fonts embedded using
- <code title="">@font-face</code> must therefore be available once
- they are loaded. (If a font is referenced before it is fully loaded,
- then it must be treated as if it was an unknown font, falling back
- to another as described by the relevant CSS specifications.) <a
+ <p>Font names must be interpreted in the context of the <span>font
+ style source node</span>'s stylesheets when the font is to be used;
+ any fonts embedded using <code title="">@font-face</code> that are
+ visible to that element must therefore be available once they are
+ loaded. (If a reference font is used before it is fully loaded, or
+ if the <span>font style source node</span> does not have that font
+ in scope at the time the font is to be used, then it must be treated
+ as if it was an unknown font, falling back to another as described
+ by the relevant CSS specifications.) <a
href="#refsCSSFONTS">[CSSFONTS]</a></p>
- <!-- XXX Path objects don't have a canvas -->
-
<p>Only vector fonts should be used by the user agent; if a user
agent were to use bitmap fonts then transformations would likely
make the font look very ugly.</p>
@@ -41300,17 +41335,20 @@
sans-serif. When the 'font-size' component is set to lengths using
percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
keywords, these must be interpreted relative to the computed value
- of the 'font-size' property of the corresponding <code>canvas</code>
- element at the time that the attribute is set. When the
- 'font-weight' component is set to the relative values 'bolder' and
- 'lighter', these must be interpreted relative to the computed value
- of the 'font-weight' property of the corresponding
- <code>canvas</code> element at the time that the attribute is set.
- If the computed values are undefined for a particular case (e.g.
- because the <code>canvas</code> element is not <span>in a
+
+
+ of the 'font-size' property of the <span>font style source
+ node</span> at the time that the attribute is set, if that is an
+ element. When the 'font-weight' component is set to the relative
+ values 'bolder' and 'lighter', these must be interpreted relative to
+ the computed value of the 'font-weight' property of the <span>font
+ style source node</span> at the time that the attribute is set, if
+ that is an element. If the computed values are undefined for a
+ particular case (e.g. because the <span>font style source
+ node</span> is not an element or is not <span>in a
<code>Document</code></span>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p> <!-- XXX Path canvas issue again, twice -->
+ default.</p>
<p>The <dfn
title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
@@ -41375,26 +41413,235 @@
</dl>
+ <p>The <dfn>text preparation algorithm</dfn> is as follows. It takes
+ as input a string <var title="">text</var>, a
+ <code>CanvasText</code> object <var title="">target</var>, and an
+ optional length <var title="">maxWidth</var>. It returns an array of
+ glyph shapes, each positioned on a common coordinate space, and a
+ <var title="">physical alignment</var> whose value is one of
+ <i>left</i>, <i>right</i>, and <i>center</i>. (Most callers of this
+ algorithm ignore the <var title="">physical alignment</var>.)</p>
+ <ol>
+ <li><p>If <var title="">maxWidth</var> was provided but is less
+ than or equal to zero, return an empty array.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Let <var title="">font</var> be the current font of <var
+ title="">target</var>, as given by that object's <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li>
+
+ <p>Apply the appropriate step from the following list to determine
+ the value of <var title="">direction</var>:</p>
+
+ <dl class="switch">
+
+ <dt>If the <var title="">target</var> object's <span>font style
+ source node</span> is an element</dt>
+
+ <dd>Let <var title="">direction</var> be <span>the
+ directionality</span> of the <var title="">target</var> object's
+ <span>font style source node</span>.</dd>
+
+ <dt>If the <var title="">target</var> object's <span>font style
+ source node</span> is a <code>Document</code> and that
+ <code>Document</code> has a root element child</dt>
+
+ <dd>Let <var title="">direction</var> be <span>the
+ directionality</span> of the <var title="">target</var> object's
+ <span>font style source node</span>'s root element child.</dd>
+
+ <dt>If the <var title="">target</var> object's <span>font style
+ source node</span> is a <code>Document</code> and that
+ <code>Document</code> has no root element child</dt>
+
+ <dd>Let <var title="">direction</var> be '<span
+ title="concept-ltr">ltr</span>'.</dd>
+
+ </dl>
+
+ </li>
+
+ <li><p>Form a hypothetical infinitely-wide CSS line box containing
+ a single inline box containing the text <var title="">text</var>,
+ with all the properties at their initial values except the 'font'
+ property of the inline box set to <var title="">font</var>, the
+ 'direction' property of the inline box set to <var
+ title="">direction</var>, and the 'white-space' property set to
+ 'pre'. <a href="#refsCSS">[CSS]</a></p></li>
+
+ <!-- if you insert a step here, make sure to adjust the next step's
+ final words -->
+
+ <li><p>If <var title="">maxWidth</var> was provided and the
+ hypothetical width of the inline box in the hypothetical line box
+ is greater than <var title="">maxWidth</var> CSS pixels, then
+ change <var title="">font</var> to have a more condensed font (if
+ one is available or if a reasonably readable one can be synthesized
+ by applying a horizontal scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>The <var title="">anchor point</var> is a point on the inline
+ box, and the <var title="">physical alignment</var> is one of the
+ values <i>left</i>, <i>right</i>, and <i>center</i>. These
+ variables are determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code> and <code
+ title="dom-context-2d-textBaseline">textBaseline</code> values as
+ follows:</p>
+
+ <p>Horizontal position:</p>
+
+ <dl>
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">left</code></dt>
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the left edge of the inline box, and let <var
+ title="">physical alignment</var> be <i>left</i>.</dd>
+
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">right</code></dt>
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">end</code> and <var title="">direction</var> is
+ 'ltr'</dt>
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">start</code> and <var title="">direction</var> is
+ 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be the right edge of the inline box, and let <var
+ title="">physical alignment</var> be <i>right</i>.</dd>
+
+
+ <dt>If <code title="dom-context-2d-textAlign">textAlign</code> is
+ <code title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s horizontal
+ position be half way between the left and right edges of the
+ inline box, and let <var title="">physical alignment</var> be
+ <i>center</i>.</dd>
+
+ </dl>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-top">top</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the top of the em box of the first available font of the
+ inline box.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-hanging">hanging</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the hanging baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-middle">middle</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the bottom and the top of the em box of the
+ first available font of the inline box.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the alphabetic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-ideographic">ideographic</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the ideographic baseline of the first available font of the inline
+ box.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textBaseline">textBaseline</code> is <code
+ title="dom-context-2d-textBaseline-bottom">bottom</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be the bottom of the em box of the first available font of the
+ inline box.</dd>
+
+ </dl>
+
+ </li>
+
+ <li>
+
+ <p>Let <var title="">result</var> be an array constructed by
+ iterating over each glyph in the inline box from left to right (if
+ any), adding to the array, for each glyph, the shape of the glyph
+ as it is in the inline box, positioned on a coordinate space using
+ CSS pixels with its origin is at the <var title="">anchor
+ point</var>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">result</var>, and, for callers that
+ need it, <var title="">physical alignment</var> as the alignment
+ value.</p></li>
+
+ </ol>
+
+
<h6>Building paths</h6>
<p>Each object implementing the <code>CanvasPathMethods</code>
- interface has a <span>path</span>. A <dfn>path</dfn> has a list of
- zero or more subpaths. Each subpath consists of a list of one or
- more points, connected by straight or curved lines, and a flag
- indicating whether the subpath is closed or not. A closed subpath is
- one where the last point of the subpath is connected to the first
- point of the subpath by a straight line. Subpaths with fewer than
- two points are ignored when painting the path.</p>
+ interface has a <span title="concept-path">path</span>. A <dfn
+ title="concept-path">path</dfn> has a list of zero or more subpaths.
+ Each subpath consists of a list of one or more points, connected by
+ straight or curved lines, and a flag indicating whether the subpath
+ is closed or not. A closed subpath is one where the last point of
+ the subpath is connected to the first point of the subpath by a
+ straight line. Subpaths with fewer than two points are ignored when
+ painting the path.</p>
<p>When an object implementing the <code>CanvasPathMethods</code>
- interface is created, its <span>path</span> must be initialized to
- zero subpaths.</p>
+ interface is created, its <span title="concept-path">path</span>
+ must be initialized to zero subpaths.</p>
<dl class="domintro">
<dt><var title="">context</var> . <code title="dom-context-2d-moveTo">moveTo</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-moveTo">moveTo</code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -41403,6 +41650,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-closePath">closePath</code>()</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-closePath">closePath</code>()</dt>
<dd>
@@ -41411,6 +41659,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-lineTo">lineTo</code>(<var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-lineTo">lineTo</code>(<var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -41419,6 +41668,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</code>(<var title="">cpx</var>, <var title="">cpy</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -41427,6 +41677,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-bezierCurveTo">bezierCurveTo</code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-bezierCurveTo">bezierCurveTo</code>(<var title="">cp1x</var>, <var title="">cp1y</var>, <var title="">cp2x</var>, <var title="">cp2y</var>, <var title="">x</var>, <var title="">y</var>)</dt>
<dd>
@@ -41435,6 +41686,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-arcTo">arcTo</code>(<var title="">x1</var>, <var title="">y1</var>, <var title="">x2</var>, <var title="">y2</var>, <var title="">radius</var>)</dt>
<dd>
@@ -41448,6 +41700,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-arc">arc</code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-arc">arc</code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
<dd>
@@ -41463,6 +41716,7 @@
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-rect">rect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-context-2d-rect">rect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
<dd>
@@ -41475,11 +41729,12 @@
<div class="impl">
<p>The following methods allow authors to manipulate the <span
- title="path">paths</span> of objects implementing the
+ title="concept-path">paths</span> of objects implementing the
<code>CanvasPathMethods</code> interface.</p>
- <p>The points and lines added to an object's <span>path</span> by
- these methods must be transformed according to the <span
+ <p>The points and lines added to an object's <span
+ title="concept-path">path</span> by these methods must be
+ transformed according to the <span
title="dom-context-2d-transformation">current transformation
matrix</span> of the object implementing the
<code>CanvasPathMethods</code> interface before they are added to
@@ -41499,12 +41754,13 @@
<p>When the user agent is to <dfn>ensure there is a subpath</dfn>
for a coordinate (<var title="">x</var>, <var title="">y</var>) on a
- <span>path</span>, the user agent must check to see if the
- <span>path</span> has any subpaths, and if it does not, then the
- user agent must create a new subpath with the point (<var
- title="">x</var>, <var title="">y</var>) as its first (and only)
- point, as if the <code title="dom-context-2d-moveTo">moveTo()</code>
- method had been called.</p>
+ <span title="concept-path">path</span>, the user agent must check to
+ see if the <span title="concept-path">path</span> has any subpaths,
+ and if it does not, then the user agent must create a new subpath
+ with the point (<var title="">x</var>, <var title="">y</var>) as its
+ first (and only) point, as if the <code
+ title="dom-context-2d-moveTo">moveTo()</code> method had been
+ called.</p>
<p>The <dfn
@@ -41685,7 +41941,387 @@
+ <h6><code>Path</code> objects</h6>
+ <p><code>Path</code> objects can be used to declare paths that are
+ then later used on <code>CanvasRenderingContext2D</code> objects. In
+ addition to many of the APIs described in earlier sections,
+ <code>Path</code> objects have methods to combine paths, and to add
+ text to paths.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">path</var> = new <code title="dom-path">Path</code>([ <var title="">element</var> ])</dt>
+
+ <dd>
+
+ <p>Creates a new <code>Path</code> object, optionally using a specific element for resolving relative keywords and sizes in font specifications.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title="dom-path-addFill">addFill</code>(<var title="">path</var>)</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addStroke">addStroke</code>(<var title="">path</var>)</dt>
+
+ <dd>
+
+ <p>Adds to the path the path given by the argument.</p>
+
+ </dd>
+
+ <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addFillText">addFillText</code>(<var title="">text</var>, <var title="">path</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ])</dt>
+ <dt><var title="">path</var> . <code title="dom-path-addStrokeText">addStrokeText</code>(<var title="">text</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>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>Each <code>Path</code> object has a <dfn>path scope node</dfn>.</p>
+
+ <p>The <dfn title="dom-path"><code>Path()</code></dfn> constructor,
+ when invoked, must return a newly created <code>Path</code> object.
+ If the constructor was passed an argument, then the
+ <code>Path</code> object's <span>path scope node</span> is that
+ element. Otherwise, the object's <span>path scope node</span> is
+ the <code>Document</code> object of the <span>active
+ document</span> of the <span>browsing context</span> of the
+ <code>Window</code> object on which the interface object of the
+ invoked constructor is found.</p>
+
+ <p>The <dfn title="dom-path-addFill"><code>addFill(<var
+ title="">b</var>)</code></dfn> method, when invoked on a
+ <code>Path</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
+ 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 in <var title="">c</var> by
+ the <span title="dom-context-2d-transformation">current
+ transformation matrix</span> of <var title="">a</var>.</p></li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ last point in the last subpath of <var title="">c</var>.</p></li>
+
+ <li><p>Add all the subpaths in <var title="">c</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
+ subpath.</p></li>
+
+ </ol>
+
+ <p>The <dfn title="dom-path-addStroke"><code>addStroke(<var
+ title="">b</var>)</code></dfn> method, when invoked on a
+ <code>Path</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
+ 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 in <var title="">c</var> by
+ the <span title="dom-context-2d-transformation">current
+ transformation matrix</span> of <var title="">a</var>.</p></li>
+
+ <li><p>Create a new list of subpaths <var title="">d</var>,
+ consisting of the subpaths necessary to describe the result of
+ tracing the subpaths in <var title="">c</var>, in the same order,
+ while applying the line styles of <var title="">a</var> (the <code
+ title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineCap">lineCap</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes).
+ Subpaths in <var title="">d</var> must wind clockwise, regardless
+ of the direction of paths in <var title="">c</var>.</p>
+
+ <!--
+
+ Because both of these examples result in two lines (assuming
+ non-zero winding rules, things are different under even/odd),
+ there's no "hole" where the lines overlap:
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.stroke();
+
+ c.beginPath();
+ c.lineWidth=30;
+ c.moveTo(200,200); // subpath 1
+ c.lineTo(400,200);
+ c.lineTo(300,300);
+ c.closePath();
+ c.moveTo(400,210); // subpath 2
+ c.lineTo(200,190);
+ c.lineTo(300,300);
+ c.closePath();
+ c.stroke();
+
+ ...and we want the same result when you create the two subpaths
+ in each example above as two Paths, stroke them onto a third
+ Path, and then fill that Path on the context.
+
+ -->
+
+ <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>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>
+
+ <p>The <dfn
+ title="dom-context-2d-addFillText"><code>addFillText()</code></dfn> and
+ <dfn
+ title="dom-context-2d-addStrokeText"><code>addStrokeText()</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, a maximum width can optionally be provided.</p>
+
+ <p>When one of the <code
+ title="dom-context-2d-addStrokeText">addFillText()</code> and <code
+ title="dom-context-2d-addStrokeText">addStrokeText()</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>Path</code> object, 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><p>Let <var title="">glyph subpaths</var> be a list of subpaths
+ 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
+ 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-context-2d-addStrokeText">addStrokeText()</code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <code>Path</code> object (the <code
+ title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineCap">lineCap</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also all
+ wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span> of the <code>Path</code> object.</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="">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>
+
+ <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
+ subpath.</p></li>
+
+ </ol>
+
+ <p>When one of the <code
+ title="dom-context-2d-addFillText">addFillText()</code> and <code
+ title="dom-context-2d-addStrokeText">addStrokeText()</code> variants
+ that take as argument a <code>Path</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>
+ object on which the method was invoked.</p></li>
+
+ <li><p>Let <var title="">path</var> be the <code>Path</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>, <var title="">target</var>, 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
+ 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>
+
+ <li><p>Define <var title="">L</var> to be a linear coordinate line
+ for of all the subpaths in <var title="">path</var>, with
+ additional lines drawn between the last point and the first point
+ of each closed subpath, such that the first point of the first
+ subpath is defined as point 0, and the last point of the last
+ subpath, if the last subpath is not closed, or the second
+ occurrence first point of that subpath, if it is closed, is defined
+ as point <var title="">width</var>.</p></li>
+
+ <li>
+
+ <p>Let <var title="">offset</var> be determined according to the
+ appropriate step below:</p>
+
+ <dl class="switch">
+
+ <dt>If <var title="">physical alignment</var> is <i>left</i></dt>
+ <dd>Let <var title="">offset</var> be zero.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i>right</i></dt>
+ <dd>Let <var title="">offset</var> be <var title="">width</var>.</dd>
+
+ <dt>If <var title="">physical alignment</var> is <i>center</i></dt>
+ <dd>Let <var title="">offset</var> be half of <var title="">width</var>.</dd>
+
+ </dl>
+
+ </li>
+
+ <li><p>Move all the shapes in <var title="">glyphs</var> to the
+ right by <var title="">offset</var> CSS pixels.</p></li>
+
+ <li>
+
+ <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>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
+ in <var title="">path</var>. (This just changes the
+ dimensionality of <var title="">dx</var>, not its numeric
+ value.)</p> <!-- hide this step if people get confused by the
+ pedancy -->
+
+ <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
+ 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
+ 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
+ at the <var title="">dx</var> coordinate horizontally and the
+ zero coordinate vertically.</p></li>
+
+ <li><p>Let (<var title="">x</var>, <var title="">y</var>) be the
+ 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>
+
+ <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
+ 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-context-2d-addStrokeText">addStrokeText()</code>,
+ replace <var title="">glyph subpaths</var> by a new list of
+ subpaths consisting of the subpaths necessary to describe the
+ result of tracing the subpaths added to <var title="">glyph
+ subpaths</var> in the preview step, in the same order, while
+ applying the line styles of the <var title="">target</var> object
+ (the <code title="dom-context-2d-lineWidth">lineWidth</code>,
+ <code title="dom-context-2d-lineCap">lineCap</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes).
+ These subpaths in <var title="">glyph subpaths</var> must also
+ all wind clockwise.</p>
+
+ <li><p>Transform all the coordinates in <var title="">glyph
+ subpaths</var> by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span> of <var title="">target</var>.</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="">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 title="">glyph subpaths</var>
+ to <var title="">target</var>.</p></li>
+
+ </ol>
+
+ </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
+ subpath.</p></li>
+
+ </ol>
+
+ </div>
+
+
<h6>Fill and stroke styles</h6>
<dl class="domintro">
@@ -42168,12 +42804,424 @@
- <h6>The current default path</h6>
+ <h6>Drawing rectangles to the canvas</h6>
+
+ <p>There are three methods that immediately draw rectangles to the
+ bitmap. They each take four arguments; the first two give the <var
+ title="">x</var> and <var title="">y</var> coordinates of the top
+ left of the rectangle, and the second two give the width <var
+ title="">w</var> and height <var title="">h</var> of the rectangle,
+ respectively.</p>
+
+ <div class="impl">
+
+ <p>The <span title="dom-context-2d-transformation">current
+ transformation matrix</span> must be applied to the following four
+ coordinates, which form the path that must then be closed to get the
+ specified rectangle: <span title="">(<var title="">x</var>, <var
+ title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var
+ title="">w</var></span>, <var title="">y</var>)</span>,
+ <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
+ <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
+ <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var
+ title="">h</var></span>)</span>.</p>
+
+ <p>Shapes are painted without affecting the current default path,
+ and are subject to the <span title="clipping region">clipping
+ region</span>, and, with the exception of <code
+ title="dom-context-2d-clearRect">clearRect()</code>, also <span
+ title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </div>
+
+ <dl class="domintro">
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-clearRect">clearRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-fillRect">fillRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
+
+ </dd>
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-strokeRect">strokeRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
+
+ <dd>
+
+ <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must clear the pixels in the
+ specified rectangle that also intersect the current clipping region
+ to a fully transparent black, erasing any previous image. If either
+ height or width are zero, this method has no effect.</p>
+
+ <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must paint the specified
+ rectangular area using the <code
+ title="dom-context-2d-fillStyle">fillStyle</code>. If either height
+ or width are zero, this method has no effect.</p>
+
+ <p>The <dfn title="dom-context-2d-strokeRect"><code>strokeRect(<var
+ title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
+ title="">h</var>)</code></dfn> method must stroke the specified
+ rectangle's path using the <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
+ title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes. If
+ both height and width are zero, this method has no effect, since
+ there is no path to stroke (it's a point). If only one of the two is
+ zero, then the method will draw a line instead (the path for the
+ outline is just a straight line along the non-zero dimension).</p>
+
+ </div>
+
+
+
+ <h6>Drawing text to the canvas</h6>
+
+ <dl class="domintro">
+
+ <dt><var title="">context</var> . <code title="dom-context-2d-fillText">fillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+ <dt><var title="">context</var> . <code title="dom-context-2d-strokeText">strokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
+
+ <dd>
+
+ <p>Fills or strokes (respectively) the given text at the given
+ position. If a maximum width is provided, the text will be scaled
+ to fit that width if necessary.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> = <var title="">context</var> . <code title="dom-context-2d-measureText">measureText</code>(<var title="">text</var>)</dt>
+
+ <dd>
+
+ <p>Returns a <code>TextMetrics</code> object with the metrics of the given text in the current font.</p>
+
+ </dd>
+
+ <dt><var title="">metrics</var> . <code title="dom-textmetrics-width">width</code></dt>
+
+ <dd>
+
+ <p>Returns the advance width of the text that was passed to the
+ <code title="dom-context-2d-measureText">measureText()</code>
+ method.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <code>CanvasRenderingContext2D</code> interface provides the
+ following methods for rendering text directly to the canvas.</p>
+
+ <p>The <dfn
+ title="dom-context-2d-fillText"><code>fillText()</code></dfn> and
+ <dfn
+ title="dom-context-2d-strokeText"><code>strokeText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxWidth</var>, and render the given <var
+ title="">text</var> at the given (<var title="">x</var>, <var
+ title="">y</var>) coordinates ensuring that the text isn't wider
+ than <var title="">maxWidth</var> if specified, using the current
+ <code title="dom-context-2d-font">font</code>, <code
+ title="dom-context-2d-textAlign">textAlign</code>, and <code
+ title="dom-context-2d-textBaseline">textBaseline</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>Run the <span>text preparation algorithm</span>, passing it
+ <var title="">text</var>, the <code>CanvasRenderingContext2D</code>
+ object, 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>
+
+ <p>Paint the shapes given in <var title="">glyphs</var>, as
+ transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, with each CSS pixel in the coordinate space of <var
+ title="">glyphs</var> mapped to one coordinate space unit.</p>
+
+ <p>For <code title="dom-context-2d-fillText">fillText()</code>,
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied to the shapes and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeText">strokeText()</code>, the reverse
+ holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied to the shape outlines, along with the <code
+ title="dom-context-2d-lineWidth">lineWidth</code>, <code
+ title="dom-context-2d-lineCap">lineCap</code>, <code
+ title="dom-context-2d-lineJoin">lineJoin</code>, and (if
+ appropriate) <code
+ title="dom-context-2d-miterLimit">miterLimit</code> attributes,
+ and <code title="dom-context-2d-fillStyle">fillStyle</code> must
+ be ignored.</p>
+
+ <p>These shapes are painted without affecting the current path,
+ and are subject to <span title="shadows">shadow effects</span>,
+ <span title="dom-context-2d-globalAlpha">global alpha</span>, the
+ <span title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+<!--v6DVT - this is commented out until CSS can get its act together
+enough to actual specify vertical text rendering (how long have we
+been waiting now?)
+
+WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
+
+ALSO NOTE THAT THIS PROBABLY NEEDS ENTIRELY REVISITING NOW THAT WE
+HAVE REJIGGED HOW TEXT WORKS IN v5
+
+ <p>The <dfn
+ title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
+ and <dfn
+ title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
+ methods take three or four arguments, <var title="">text</var>, <var
+ title="">x</var>, <var title="">y</var>, and optionally <var
+ title="">maxHeight</var>, and render the given <var
+ title="">text</var> as vertical text at the given (<var
+ title="">x</var>, <var title="">y</var>) coordinates ensuring that
+ the text isn't taller than <var title="">maxHeight</var> if
+ specified, using the current <code
+ title="dom-context-2d-font">font</code> and <code
+ title="dom-context-2d-textAlign">textAlign</code>
+ values. Specifically, when the methods are called, the user agent
+ must run the following steps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">maxHeight</var> is present but less than or
+ equal to zero, return without doing anything; abort these
+ steps.</p></li>
+
+ <li><p>Let <var title="">font</var> be the current font of the
+ context, as given by the <code
+ title="dom-context-2d-font">font</code> attribute.</p></li>
+
+ <li><p>Replace all the <span title="space character">space
+ characters</span> in <var title="">text</var> with U+0020 SPACE
+ characters.</p></li>
+
+ <li><p>Form a <em class="XXX">whatever CSS ends up calling
+ vertical line boxes and inline boxes</em> containing the text <var
+ title="">text</var>, with all the properties at their initial
+ values except the 'font' property of the inline box set to <var
+ title="">font</var> and the 'direction' property of the inline
+ box set to <span>the directionality</span> of the <code>canvas</code>
+ element.</p></li>
+
+ <!- - if you insert a step here, make sure to adjust the next step's
+ final words - ->
+
+ <li><p>If the <var title="">maxHeight</var> argument was specified
+ and the hypothetical height of the <em class="XXX">box</em>
+ in the hypothetical line box is greater than <var
+ title="">maxHeight</var> CSS pixels, then change <var
+ title="">font</var> to have a more condensed font (if one is
+ available or if a reasonably readable one can be synthesized by
+ applying an appropriate scale factor to the font) or a smaller
+ font, and return to the previous step.</p></li>
+
+ <li>
+
+ <p>Let the <var title="">anchor point</var> be a point on the <em
+ class="XXX">inline box</var>, determined by the <code
+ title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
+
+ <p>Vertical position:</p>
+
+ <dl>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">start</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the top edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">end</code></dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">right</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'ltr'</dt>
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">left</code> and <span>the directionality</span> of the
+ <code>canvas</code> element is 'rtl'</dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical
+ position be the bottom edge of the <em class="XXX">inline
+ box</em>.</dd>
+
+
+ <dt>If <code
+ title="dom-context-2d-textAlign">textAlign</code> is <code
+ title="">center</code></dt>
+
+ <dd>Let the <var title="">anchor point</var>'s vertical position
+ be half way between the top and bottom edges of the <em
+ class="XXX">inline box</em>.</dd>
+
+ </dl>
+
+ <p>Let the horizontal position be half way between the left and
+ right edges of the em box of the first available font of the <em
+ class="XXX">inline box</em>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Paint the hypothetical inline box as the shape given by the
+ text's glyphs, as transformed by the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>, and anchored and sized so that before applying the
+ <span title="dom-context-2d-transformation">current transformation
+ matrix</span>, the <var title="">anchor point</var> is at (<var
+ title="">x</var>, <var title="">y</var>) and each CSS pixel is
+ mapped to one coordinate space unit.</p>
+
+ <p>For <code
+ title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
+ <code title="dom-context-2d-fillStyle">fillStyle</code> must be
+ applied and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ ignored. For <code
+ title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
+ the reverse holds and <code
+ title="dom-context-2d-strokeStyle">strokeStyle</code> must be
+ applied and <code
+ title="dom-context-2d-fillStyle">fillStyle</code> must be
+ ignored.</p>
+
+ <p>Text is painted without affecting the current path, and is
+ subject to <span title="shadows">shadow effects</span>, <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, the <span
+ title="clipping region">clipping region</span>, and <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>.</p>
+
+ </li>
+
+ </ol>
+
+v6DVT (also check for '- -' bits in the part above) -->
+
+ <p>The <dfn
+ title="dom-context-2d-measureText"><code>measureText()</code></dfn>
+ method takes one argument, <var title="">text</var>. When the method
+ is invoked, the user agent must replace all the <span title="space
+ character">space characters</span> in <var title="">text</var> with
+ U+0020 SPACE characters, and then must form a hypothetical
+ infinitely-wide CSS line box containing a single inline box
+ containing the text <var title="">text</var>, with all the
+ properties at their initial values except the 'white-space' property
+ of the inline element set to 'pre' and the 'font' property of the
+ inline element set to the current font of the context as given by
+ the <code title="dom-context-2d-font">font</code> attribute, and
+ must then create a new <code>TextMetrics</code> object with its
+ <code title="dom-textmetrics-width">width</code> attribute set to
+ the width of that inline box, in CSS pixels.
+<!--ADD-TOPIC:Security-->
+ If doing these measurements requires using a font that has an
+ <span>origin</span> that is not the <span title="same
+ origin">same</span> as that of the <code>Document</code> object that
+ owns the <code>canvas</code> element (even if "using a font" means
+ just checking if that font has a particular glyph in it before
+ falling back to another font), then the method must throw a
+ <code>SecurityError</code> exception.
+<!--REMOVE-TOPIC:Security-->
+ Otherwise, it must return the new <code>TextMetrics</code> object.
+ <a href="#refsCSS">[CSS]</a></p>
+
+ <p>The <code>TextMetrics</code> interface is used for the objects
+ returned from <code
+ title="dom-context-2d-measureText">measureText()</code>. It has one
+ attribute, <dfn
+ title="dom-textmetrics-width"><code>width</code></dfn>, which is set
+ by the <code title="dom-context-2d-measureText">measureText()</code>
+ method.</p>
+
+ <p class="note">Glyphs rendered using <code
+ title="dom-context-2d-fillText">fillText()</code> and <code
+ title="dom-context-2d-strokeText">strokeText()</code> can spill out
+ of the box given by the font size (the em square size) and the width
+ returned by <code
+ title="dom-context-2d-measureText">measureText()</code> (the text
+ width). This version of the specification does not provide a way to
+ obtain the bounding box dimensions of the text. If the text is to be
+ rendered and removed, care needs to be taken to replace the entire
+ area of the canvas that the clipping region covers, not just the box
+ given by the em square height and measured text width.</p>
+
+ </div>
+
+ <p class="note">A future version of the 2D context API may provide a
+ way to render fragments of documents, rendered using CSS, straight
+ to the canvas. This would be provided in preference to a dedicated
+ way of doing multiline layout.</p>
+
+
+
+ <h6>Drawing paths to the canvas</h6>
+
<p>The context always has a current default path. There is only one
current default path, it is not part of the <span>drawing
- state</span>. The current default path is a <span>path</span>, as
- described in the previous section.</p>
+ state</span>. The current default path is a <span
+ title="concept-path">path</span>, as described in the previous
+ section.</p>
<dl class="domintro">
@@ -42560,555 +43608,6 @@
-
-
- <h6>Drawing rectangles to the canvas</h6>
-
- <p>There are three methods that immediately draw rectangles to the
- bitmap. They each take four arguments; the first two give the <var
- title="">x</var> and <var title="">y</var> coordinates of the top
- left of the rectangle, and the second two give the width <var
- title="">w</var> and height <var title="">h</var> of the rectangle,
- respectively.</p>
-
- <div class="impl">
-
- <p>The <span title="dom-context-2d-transformation">current
- transformation matrix</span> must be applied to the following four
- coordinates, which form the path that must then be closed to get the
- specified rectangle: <span title="">(<var title="">x</var>, <var
- title="">y</var>)</span>, <span title="">(<span title=""><var title="">x</var>+<var
- title="">w</var></span>, <var title="">y</var>)</span>,
- <span title="">(<span title=""><var title="">x</var>+<var title="">w</var></span>,
- <span title=""><var title="">y</var>+<var title="">h</var></span>)</span>,
- <span title="">(<var title="">x</var>, <span title=""><var title="">y</var>+<var
- title="">h</var></span>)</span>.</p>
-
- <p>Shapes are painted without affecting the current default path,
- and are subject to the <span title="clipping region">clipping
- region</span>, and, with the exception of <code
- title="dom-context-2d-clearRect">clearRect()</code>, also <span
- title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
- </div>
-
- <dl class="domintro">
-
- <dt><var title="">context</var> . <code title="dom-context-2d-clearRect">clearRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Clears all pixels on the canvas in the given rectangle to transparent black.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-fillRect">fillRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the given rectangle onto the canvas, using the current fill style.</p>
-
- </dd>
-
- <dt><var title="">context</var> . <code title="dom-context-2d-strokeRect">strokeRect</code>(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</dt>
-
- <dd>
-
- <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must clear the pixels in the
- specified rectangle that also intersect the current clipping region
- to a fully transparent black, erasing any previous image. If either
- height or width are zero, this method has no effect.</p>
-
- <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must paint the specified
- rectangular area using the <code
- title="dom-context-2d-fillStyle">fillStyle</code>. If either height
- or width are zero, this method has no effect.</p>
-
- <p>The <dfn title="dom-context-2d-strokeRect"><code>strokeRect(<var
- title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
- title="">h</var>)</code></dfn> method must stroke the specified
- rectangle's path using the <code
- title="dom-context-2d-strokeStyle">strokeStyle</code>, <code
- title="dom-context-2d-lineWidth">lineWidth</code>, <code
- title="dom-context-2d-lineJoin">lineJoin</code>, and (if
- appropriate) <code
- title="dom-context-2d-miterLimit">miterLimit</code> attributes. If
- both height and width are zero, this method has no effect, since
- there is no path to stroke (it's a point). If only one of the two is
- zero, then the method will draw a line instead (the path for the
- outline is just a straight line along the non-zero dimension).</p>
-
- </div>
-
-
-
- <h6>Drawing text to the canvas</h6>
-
- <dl class="domintro">
-
- <dt><var title="">context</var> . <code title="dom-context-2d-fillText">fillText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
- <dt><var title="">context</var> . <code title="dom-context-2d-strokeText">strokeText</code>(<var title="">text</var>, <var title="">x</var>, <var title="">y</var> [, <var title="">maxWidth</var> ] )</dt>
-
- <dd>
-
- <p>Fills or strokes (respectively) the given text at the given
- position. If a maximum width is provided, the text will be scaled
- to fit that width if necessary.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> = <var title="">context</var> . <code title="dom-context-2d-measureText">measureText</code>(<var title="">text</var>)</dt>
-
- <dd>
-
- <p>Returns a <code>TextMetrics</code> object with the metrics of the given text in the current font.</p>
-
- </dd>
-
- <dt><var title="">metrics</var> . <code title="dom-textmetrics-width">width</code></dt>
-
- <dd>
-
- <p>Returns the advance width of the text that was passed to the
- <code title="dom-context-2d-measureText">measureText()</code>
- method.</p>
-
- </dd>
-
- </dl>
-
- <div class="impl">
-
- <p>The <code>CanvasRenderingContext2D</code> interface provides the
- following methods for rendering text directly to the canvas.</p>
-
- <p>The <dfn
- title="dom-context-2d-fillText"><code>fillText()</code></dfn> and
- <dfn
- title="dom-context-2d-strokeText"><code>strokeText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var
- title="">x</var>, <var title="">y</var>, and optionally <var
- title="">maxWidth</var>, and render the given <var
- title="">text</var> at the given (<var title="">x</var>, <var
- title="">y</var>) coordinates ensuring that the text isn't wider
- than <var title="">maxWidth</var> if specified, using the current
- <code title="dom-context-2d-font">font</code>, <code
- title="dom-context-2d-textAlign">textAlign</code>, and <code
- title="dom-context-2d-textBaseline">textBaseline</code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol>
-
- <li><p>If <var title="">maxWidth</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</p></li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code
- title="dom-context-2d-font">font</code> attribute.</p></li>
-
- <li><p>Replace all the <span title="space character">space
- characters</span> in <var title="">text</var> with U+0020 SPACE
- characters.</p></li>
-
- <li><p>Form a hypothetical infinitely wide CSS line box containing
- a single inline box containing the text <var title="">text</var>,
- with all the properties at their initial values except the 'font'
- property of the inline box set to <var title="">font</var>, the
- 'direction' property of the inline box set to <span>the
- directionality</span> of the <code>canvas</code> element, and the
- 'white-space' property set to 'pre'. <a
- href="#refsCSS">[CSS]</a></p></li>
-
- <!-- if you insert a step here, make sure to adjust the next step's
- final words -->
-
- <li><p>If the <var title="">maxWidth</var> argument was specified
- and the hypothetical width of the inline box in the hypothetical
- line box is greater than <var title="">maxWidth</var> CSS pixels,
- then change <var title="">font</var> to have a more condensed font
- (if one is available or if a reasonably readable one can be
- synthesized by applying a horizontal scale factor to the font) or a
- smaller font, and return to the previous step.</p></li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the
- inline box, determined by the <code
- title="dom-context-2d-textAlign">textAlign</code> and <code
- title="dom-context-2d-textBaseline">textBaseline</code> values, as
- follows:</p>
-
- <p>Horizontal position:</p>
-
- <dl>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">start</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">end</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the left edge of the inline box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">end</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">start</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be the right edge of the inline box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s horizontal
- position be half way between the left and right edges of the
- inline box.</dd>
-
- </dl>
-
- <p>Vertical position:</p>
-
- <dl>
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-top">top</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the top of the em box of the first available font of the
- inline box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-hanging">hanging</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the hanging baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-middle">middle</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the bottom and the top of the em box of the
- first available font of the inline box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-alphabetic">alphabetic</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the alphabetic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-ideographic">ideographic</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the ideographic baseline of the first available font of the inline
- box.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textBaseline">textBaseline</code> is <code
- title="dom-context-2d-textBaseline-bottom">bottom</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be the bottom of the em box of the first available font of the
- inline box.</dd>
-
- </dl>
-
- </li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span>, and anchored and sized so that before applying the
- <span title="dom-context-2d-transformation">current transformation
- matrix</span>, the <var title="">anchor point</var> is at (<var
- title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code title="dom-context-2d-fillText">fillText()</code>
- <code title="dom-context-2d-fillStyle">fillStyle</code> must be
- applied to the glyphs and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- ignored. For <code
- title="dom-context-2d-strokeText">strokeText()</code> the reverse
- holds and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- applied to the glyph outlines and <code
- title="dom-context-2d-fillStyle">fillStyle</code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <span title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, the <span
- title="clipping region">clipping region</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
- </li>
-
- </ol>
-
-<!--v6DVT - this is commented out until CSS can get its act together
-enough to actual specify vertical text rendering (how long have we
-been waiting now?)
-
-WHEN EDITING THIS, FIX THE PARTS MARKED "XXX" BELOW
-
- <p>The <dfn
- title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
- and <dfn
- title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
- methods take three or four arguments, <var title="">text</var>, <var
- title="">x</var>, <var title="">y</var>, and optionally <var
- title="">maxHeight</var>, and render the given <var
- title="">text</var> as vertical text at the given (<var
- title="">x</var>, <var title="">y</var>) coordinates ensuring that
- the text isn't taller than <var title="">maxHeight</var> if
- specified, using the current <code
- title="dom-context-2d-font">font</code> and <code
- title="dom-context-2d-textAlign">textAlign</code>
- values. Specifically, when the methods are called, the user agent
- must run the following steps:</p>
-
- <ol>
-
- <li><p>If <var title="">maxHeight</var> is present but less than or
- equal to zero, return without doing anything; abort these
- steps.</p></li>
-
- <li><p>Let <var title="">font</var> be the current font of the
- context, as given by the <code
- title="dom-context-2d-font">font</code> attribute.</p></li>
-
- <li><p>Replace all the <span title="space character">space
- characters</span> in <var title="">text</var> with U+0020 SPACE
- characters.</p></li>
-
- <li><p>Form a <em class="XXX">whatever CSS ends up calling
- vertical line boxes and inline boxes</em> containing the text <var
- title="">text</var>, with all the properties at their initial
- values except the 'font' property of the inline box set to <var
- title="">font</var> and the 'direction' property of the inline
- box set to <span>the directionality</span> of the <code>canvas</code>
- element.</p></li>
-
- <!- - if you insert a step here, make sure to adjust the next step's
- final words - ->
-
- <li><p>If the <var title="">maxHeight</var> argument was specified
- and the hypothetical height of the <em class="XXX">box</em>
- in the hypothetical line box is greater than <var
- title="">maxHeight</var> CSS pixels, then change <var
- title="">font</var> to have a more condensed font (if one is
- available or if a reasonably readable one can be synthesized by
- applying an appropriate scale factor to the font) or a smaller
- font, and return to the previous step.</p></li>
-
- <li>
-
- <p>Let the <var title="">anchor point</var> be a point on the <em
- class="XXX">inline box</var>, determined by the <code
- title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>
-
- <p>Vertical position:</p>
-
- <dl>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">start</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the top edge of the <em class="XXX">inline
- box</em>.</dd>
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">end</code></dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">right</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'ltr'</dt>
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">left</code> and <span>the directionality</span> of the
- <code>canvas</code> element is 'rtl'</dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical
- position be the bottom edge of the <em class="XXX">inline
- box</em>.</dd>
-
-
- <dt> If <code
- title="dom-context-2d-textAlign">textAlign</code> is <code
- title="">center</code></dt>
-
- <dd>Let the <var title="">anchor point</var>'s vertical position
- be half way between the top and bottom edges of the <em
- class="XXX">inline box</em>.</dd>
-
- </dl>
-
- <p>Let the horizontal position be half way between the left and
- right edges of the em box of the first available font of the <em
- class="XXX">inline box</em>.</p>
-
- </li>
-
- <li>
-
- <p>Paint the hypothetical inline box as the shape given by the
- text's glyphs, as transformed by the <span
- title="dom-context-2d-transformation">current transformation
- matrix</span>, and anchored and sized so that before applying the
- <span title="dom-context-2d-transformation">current transformation
- matrix</span>, the <var title="">anchor point</var> is at (<var
- title="">x</var>, <var title="">y</var>) and each CSS pixel is
- mapped to one coordinate space unit.</p>
-
- <p>For <code
- title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
- <code title="dom-context-2d-fillStyle">fillStyle</code> must be
- applied and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- ignored. For <code
- title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
- the reverse holds and <code
- title="dom-context-2d-strokeStyle">strokeStyle</code> must be
- applied and <code
- title="dom-context-2d-fillStyle">fillStyle</code> must be
- ignored.</p>
-
- <p>Text is painted without affecting the current path, and is
- subject to <span title="shadows">shadow effects</span>, <span
- title="dom-context-2d-globalAlpha">global alpha</span>, the <span
- title="clipping region">clipping region</span>, and <span
- title="dom-context-2d-globalCompositeOperation">global composition
- operators</span>.</p>
-
- </li>
-
- </ol>
-
-v6DVT (also check for '- -' bits in the part above) -->
-
- <p>The <dfn
- title="dom-context-2d-measureText"><code>measureText()</code></dfn>
- method takes one argument, <var title="">text</var>. When the method
- is invoked, the user agent must replace all the <span title="space
- character">space characters</span> in <var title="">text</var> with
- U+0020 SPACE characters, and then must form a hypothetical
- infinitely wide CSS line box containing a single inline box
- containing the text <var title="">text</var>, with all the
- properties at their initial values except the 'white-space' property
- of the inline element set to 'pre' and the 'font' property of the
- inline element set to the current font of the context as given by
- the <code title="dom-context-2d-font">font</code> attribute, and
- must then create a new <code>TextMetrics</code> object with its
- <code title="dom-textmetrics-width">width</code> attribute set to
- the width of that inline box, in CSS pixels.
-<!--ADD-TOPIC:Security-->
- If doing these measurements requires using a font that has an
- <span>origin</span> that is not the <span title="same
- origin">same</span> as that of the <code>Document</code> object that
- owns the <code>canvas</code> element (even if "using a font" means
- just checking if that font has a particular glyph in it before
- falling back to another font), then the method must throw a
- <code>SecurityError</code> exception.
-<!--REMOVE-TOPIC:Security-->
- Otherwise, it must return the new <code>TextMetrics</code> object.
- <a href="#refsCSS">[CSS]</a></p>
-
- <p>The <code>TextMetrics</code> interface is used for the objects
- returned from <code
- title="dom-context-2d-measureText">measureText()</code>. It has one
- attribute, <dfn
- title="dom-textmetrics-width"><code>width</code></dfn>, which is set
- by the <code title="dom-context-2d-measureText">measureText()</code>
- method.</p>
-
- <p class="note">Glyphs rendered using <code
- title="dom-context-2d-fillText">fillText()</code> and <code
- title="dom-context-2d-strokeText">strokeText()</code> can spill out
- of the box given by the font size (the em square size) and the width
- returned by <code
- title="dom-context-2d-measureText">measureText()</code> (the text
- width). This version of the specification does not provide a way to
- obtain the bounding box dimensions of the text. If the text is to be
- rendered and removed, care needs to be taken to replace the entire
- area of the canvas that the clipping region covers, not just the box
- given by the em square height and measured text width.</p>
-
- <!-- v5: Drawing text along a given path -->
- <!-- v5: Adding text to a path -->
- <!-- see also: http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
- <!-- see also: http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->
-
- </div>
-
- <p class="note">A future version of the 2D context API may provide a
- way to render fragments of documents, rendered using CSS, straight
- to the canvas. This would be provided in preference to a dedicated
- way of doing multiline layout.</p>
-
-
-
<h6>Drawing images to the canvas</h6>
<p>To draw images onto the canvas, the <dfn
More information about the Commit-Watchers
mailing list