[html5] r7016 - [e] (0) Factor our line style and text styles. Affected topics: Canvas
whatwg at whatwg.org
whatwg at whatwg.org
Tue Mar 6 15:23:51 PST 2012
Author: ianh
Date: 2012-03-06 15:23:49 -0800 (Tue, 06 Mar 2012)
New Revision: 7016
Modified:
complete.html
index
source
Log:
[e] (0) Factor our line style and text styles.
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2012-03-05 23:04:33 UTC (rev 7015)
+++ complete.html 2012-03-06 23:23:49 UTC (rev 7016)
@@ -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 5 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 6 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>
@@ -34871,8 +34871,8 @@
attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
// when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
// useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
+
-->
-
// compositing
attribute double <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
@@ -34884,20 +34884,15 @@
- nested layers
- the ability to composite an entire set of drawing operations with one shadow all at once
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
+
-->
- // colors and styles
+ // colors and styles (see also the <a href=#canvaslinestyles>CanvasLineStyles</a> interface)
attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
<a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, DOMString repetition);
- // line caps/joins
- attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
- attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
- attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
- attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
-
// shadows
attribute double <a href=#dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX>shadowOffsetX</a>; // (default 0)
attribute double <a href=#dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY>shadowOffsetY</a>; // (default 0)
@@ -34927,10 +34922,7 @@
void <a href=#dom-context-2d-clip title=dom-context-2d-clip>clip</a>();
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(double x, double y);
- // text
- attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
- attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
- attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ // text (see also the <a href=#canvastext>CanvasText</a> interface)
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(DOMString text, double x, double y, optional double maxWidth);
void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(DOMString text, double x, double y, optional double maxWidth);<!-- v6DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, double x, double y, optional double maxHeight);
@@ -34950,6 +34942,8 @@
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastext>CanvasText</a>;
[NoInterfaceObject]
interface <dfn id=canvastransformation>CanvasTransformation</dfn> {
@@ -34963,9 +34957,25 @@
// v7 we've also received requests (though not many so far) for:
void skew(...); // is this common enough that one can't just use setTransform()?
void reflect(...); and void mirror(...); // aren't negative values in scale() sufficient for these?
--->
+-->};
+
+[NoInterfaceObject]
+interface <dfn id=canvaslinestyles>CanvasLineStyles</dfn> {
+ // line caps/joins
+ attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
+ attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
+ attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
+ attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
};
+[NoInterfaceObject]
+interface <dfn id=canvastext>CanvasText</dfn> {
+ // text
+ attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
+ attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
+ attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+};
+
interface <dfn id=canvasgradient>CanvasGradient</dfn> {
// opaque object
void <a href=#dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop>addColorStop</a>(double offset, DOMString color);
@@ -35831,6 +35841,10 @@
</dl><div class=impl>
+ <p>Objects that implement the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface have attributes (defined in this section) that control how
+ lines are treated by the object.</p>
+
<p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
attribute gives the width of lines, in coordinate space units. On
getting, it must return the current value. On setting, zero,
@@ -35838,7 +35852,8 @@
value unchanged; other values must change the current value to the
new value.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
initially have the value <code>1.0</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linecap title=dom-context-2d-lineCap><code>lineCap</code></dfn> attribute
@@ -35860,7 +35875,8 @@
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
initially have the value <code>butt</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linejoin title=dom-context-2d-lineJoin><code>lineJoin</code></dfn>
@@ -35874,7 +35890,8 @@
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
initially have the value <code>miter</code>.</p>
<hr><p>A join exists at any point in a subpath shared by two consecutive
@@ -35890,7 +35907,7 @@
<p>A filled triangle connecting these two opposite corners with a
straight line, with the third point of the triangle being the join
- point, must be rendered at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
+ point, must be added at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
whether anything else is rendered. The three aforementioned values
have the following meanings:</p>
@@ -35901,10 +35918,10 @@
the two aforementioned corners of the join, abutting (and not
overlapping) the aforementioned triangle, with the diameter equal to
the line width and the origin at the point of the join, must be
- rendered at joins.</p>
+ added at joins.</p>
<p>The <code>miter</code> value means that a second filled triangle
- must (if it can given the miter length) be rendered at the join,
+ must (if it can given the miter length) be added at the join,
with one line being the line between the two aforementioned corners,
abutting the first triangle, and the other two being continuations of
the outside edges of the two joining lines, as long as required to
@@ -35915,7 +35932,7 @@
join. The miter limit ratio is the maximum allowed ratio of the
miter length to half the line width. If the miter length would cause
the miter limit ratio to be exceeded, this second triangle must not
- be rendered.</p>
+ be added.</p>
<p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
attribute. On getting, it must return the current value. On setting,
@@ -35923,7 +35940,8 @@
the value unchanged; other values must change the current value to
the new value.</p>
- <p>When the context is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
initially have the value <code>10.0</code>.</p>
<!--
@@ -36767,37 +36785,12 @@
</dd>
- <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>
+ </dl><div class=impl>
- <dd>
+ <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>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 <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'
property of CSS (but without supporting property-independent style
@@ -36817,6 +36810,8 @@
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>
@@ -36840,27 +36835,29 @@
</div>
- <p>When the context is created, the font of the context must be set
- to 10px sans-serif. When the 'font-size' component is set to lengths
- using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ interface is created, the font of the context must be set to 10px
+ 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
+ <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
<code>Document</code></a>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p>
+ default.</p> <!-- XXX Path canvas issue again, twice -->
<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
the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
value must be changed to the new value. Otherwise, the new value
- must be ignored. When the context is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
initially have the value <code title="">start</code>.</p>
<p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
@@ -36869,7 +36866,8 @@
<code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the context is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ value must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
must initially have the value <code title="">alphabetic</code>.</p>
</div>
@@ -36902,8 +36900,40 @@
<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><hr><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
Modified: index
===================================================================
--- index 2012-03-05 23:04:33 UTC (rev 7015)
+++ index 2012-03-06 23:23:49 UTC (rev 7016)
@@ -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 5 March 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 6 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>
@@ -34871,8 +34871,8 @@
attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
// when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
// useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
+
-->
-
// compositing
attribute double <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
@@ -34884,20 +34884,15 @@
- nested layers
- the ability to composite an entire set of drawing operations with one shadow all at once
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
+
-->
- // colors and styles
+ // colors and styles (see also the <a href=#canvaslinestyles>CanvasLineStyles</a> interface)
attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createlineargradient title=dom-context-2d-createLinearGradient>createLinearGradient</a>(double x0, double y0, double x1, double y1);
<a href=#canvasgradient>CanvasGradient</a> <a href=#dom-context-2d-createradialgradient title=dom-context-2d-createRadialGradient>createRadialGradient</a>(double x0, double y0, double r0, double x1, double y1, double r1);
<a href=#canvaspattern>CanvasPattern</a> <a href=#dom-context-2d-createpattern title=dom-context-2d-createPattern>createPattern</a>((<a href=#htmlimageelement>HTMLImageElement</a> or <a href=#htmlcanvaselement>HTMLCanvasElement</a> or <a href=#htmlvideoelement>HTMLVideoElement</a>) image, DOMString repetition);
- // line caps/joins
- attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
- attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
- attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
- attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
-
// shadows
attribute double <a href=#dom-context-2d-shadowoffsetx title=dom-context-2d-shadowOffsetX>shadowOffsetX</a>; // (default 0)
attribute double <a href=#dom-context-2d-shadowoffsety title=dom-context-2d-shadowOffsetY>shadowOffsetY</a>; // (default 0)
@@ -34927,10 +34922,7 @@
void <a href=#dom-context-2d-clip title=dom-context-2d-clip>clip</a>();
boolean <a href=#dom-context-2d-ispointinpath title=dom-context-2d-isPointInPath>isPointInPath</a>(double x, double y);
- // text
- attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
- attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
- attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ // text (see also the <a href=#canvastext>CanvasText</a> interface)
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(DOMString text, double x, double y, optional double maxWidth);
void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(DOMString text, double x, double y, optional double maxWidth);<!-- v6DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, double x, double y, optional double maxHeight);
@@ -34950,6 +34942,8 @@
void <a href=#dom-context-2d-putimagedata title=dom-context-2d-putImageData>putImageData</a>(<a href=#imagedata>ImageData</a> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastransformation>CanvasTransformation</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvaslinestyles>CanvasLineStyles</a>;
+<a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a> implements <a href=#canvastext>CanvasText</a>;
[NoInterfaceObject]
interface <dfn id=canvastransformation>CanvasTransformation</dfn> {
@@ -34963,9 +34957,25 @@
// v7 we've also received requests (though not many so far) for:
void skew(...); // is this common enough that one can't just use setTransform()?
void reflect(...); and void mirror(...); // aren't negative values in scale() sufficient for these?
--->
+-->};
+
+[NoInterfaceObject]
+interface <dfn id=canvaslinestyles>CanvasLineStyles</dfn> {
+ // line caps/joins
+ attribute double <a href=#dom-context-2d-linewidth title=dom-context-2d-lineWidth>lineWidth</a>; // (default 1)
+ attribute DOMString <a href=#dom-context-2d-linecap title=dom-context-2d-lineCap>lineCap</a>; // "butt", "round", "square" (default "butt")
+ attribute DOMString <a href=#dom-context-2d-linejoin title=dom-context-2d-lineJoin>lineJoin</a>; // "round", "bevel", "miter" (default "miter")
+ attribute double <a href=#dom-context-2d-miterlimit title=dom-context-2d-miterLimit>miterLimit</a>; // (default 10)
};
+[NoInterfaceObject]
+interface <dfn id=canvastext>CanvasText</dfn> {
+ // text
+ attribute DOMString <a href=#dom-context-2d-font title=dom-context-2d-font>font</a>; // (default 10px sans-serif)
+ attribute DOMString <a href=#dom-context-2d-textalign title=dom-context-2d-textAlign>textAlign</a>; // "start", "end", "left", "right", "center" (default: "start")
+ attribute DOMString <a href=#dom-context-2d-textbaseline title=dom-context-2d-textBaseline>textBaseline</a>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+};
+
interface <dfn id=canvasgradient>CanvasGradient</dfn> {
// opaque object
void <a href=#dom-canvasgradient-addcolorstop title=dom-canvasgradient-addColorStop>addColorStop</a>(double offset, DOMString color);
@@ -35831,6 +35841,10 @@
</dl><div class=impl>
+ <p>Objects that implement the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface have attributes (defined in this section) that control how
+ lines are treated by the object.</p>
+
<p>The <dfn id=dom-context-2d-linewidth title=dom-context-2d-lineWidth><code>lineWidth</code></dfn>
attribute gives the width of lines, in coordinate space units. On
getting, it must return the current value. On setting, zero,
@@ -35838,7 +35852,8 @@
value unchanged; other values must change the current value to the
new value.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> attribute must
initially have the value <code>1.0</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linecap title=dom-context-2d-lineCap><code>lineCap</code></dfn> attribute
@@ -35860,7 +35875,8 @@
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineCap><a href=#dom-context-2d-linecap>lineCap</a></code> attribute must
initially have the value <code>butt</code>.</p>
<hr><p>The <dfn id=dom-context-2d-linejoin title=dom-context-2d-lineJoin><code>lineJoin</code></dfn>
@@ -35874,7 +35890,8 @@
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the context is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute must
initially have the value <code>miter</code>.</p>
<hr><p>A join exists at any point in a subpath shared by two consecutive
@@ -35890,7 +35907,7 @@
<p>A filled triangle connecting these two opposite corners with a
straight line, with the third point of the triangle being the join
- point, must be rendered at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
+ point, must be added at all joins. The <code title=dom-context-2d-lineJoin><a href=#dom-context-2d-linejoin>lineJoin</a></code> attribute controls
whether anything else is rendered. The three aforementioned values
have the following meanings:</p>
@@ -35901,10 +35918,10 @@
the two aforementioned corners of the join, abutting (and not
overlapping) the aforementioned triangle, with the diameter equal to
the line width and the origin at the point of the join, must be
- rendered at joins.</p>
+ added at joins.</p>
<p>The <code>miter</code> value means that a second filled triangle
- must (if it can given the miter length) be rendered at the join,
+ must (if it can given the miter length) be added at the join,
with one line being the line between the two aforementioned corners,
abutting the first triangle, and the other two being continuations of
the outside edges of the two joining lines, as long as required to
@@ -35915,7 +35932,7 @@
join. The miter limit ratio is the maximum allowed ratio of the
miter length to half the line width. If the miter length would cause
the miter limit ratio to be exceeded, this second triangle must not
- be rendered.</p>
+ be added.</p>
<p>The miter limit ratio can be explicitly set using the <dfn id=dom-context-2d-miterlimit title=dom-context-2d-miterLimit><code>miterLimit</code></dfn>
attribute. On getting, it must return the current value. On setting,
@@ -35923,7 +35940,8 @@
the value unchanged; other values must change the current value to
the new value.</p>
- <p>When the context is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
+ <p>When the object implementing the <code><a href=#canvaslinestyles>CanvasLineStyles</a></code>
+ interface is created, the <code title=dom-context-2d-miterLimit><a href=#dom-context-2d-miterlimit>miterLimit</a></code> attribute must
initially have the value <code>10.0</code>.</p>
<!--
@@ -36767,37 +36785,12 @@
</dd>
- <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>
+ </dl><div class=impl>
- <dd>
+ <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>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 <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'
property of CSS (but without supporting property-independent style
@@ -36817,6 +36810,8 @@
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>
@@ -36840,27 +36835,29 @@
</div>
- <p>When the context is created, the font of the context must be set
- to 10px sans-serif. When the 'font-size' component is set to lengths
- using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ <p>When the object implementing the <code><a href=#canvastext>CanvasText</a></code>
+ interface is created, the font of the context must be set to 10px
+ 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
+ <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
<code>Document</code></a>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p>
+ default.</p> <!-- XXX Path canvas issue again, twice -->
<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
the value is one of <code title="">start</code>, <code title="">end</code>, <code title="">left</code>, <code title="">right</code>, or <code title="">center</code>, then the
value must be changed to the new value. Otherwise, the new value
- must be ignored. When the context is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
+ must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textAlign><a href=#dom-context-2d-textalign>textAlign</a></code> attribute must
initially have the value <code title="">start</code>.</p>
<p>The <dfn id=dom-context-2d-textbaseline title=dom-context-2d-textBaseline><code>textBaseline</code></dfn>
@@ -36869,7 +36866,8 @@
<code title=dom-context-2d-textBaseline-ideographic><a href=#dom-context-2d-textbaseline-ideographic>ideographic</a></code>,
or <code title=dom-context-2d-textBaseline-bottom><a href=#dom-context-2d-textbaseline-bottom>bottom</a></code>,
then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the context is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
+ value must be ignored. When the object implementing the
+ <code><a href=#canvastext>CanvasText</a></code> interface is created, the <code title=dom-context-2d-textBaseline><a href=#dom-context-2d-textbaseline>textBaseline</a></code> attribute
must initially have the value <code title="">alphabetic</code>.</p>
</div>
@@ -36902,8 +36900,40 @@
<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><hr><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
Modified: source
===================================================================
--- source 2012-03-05 23:04:33 UTC (rev 7015)
+++ source 2012-03-06 23:23:49 UTC (rev 7016)
@@ -40553,8 +40553,8 @@
attribute boolean <span title="dom-context-2d-forceHighQuality">forceHighQuality</span> // (default false)
// when enabled, it would prevent the UA from falling back on lower-quality but faster rendering routines
// useful e.g. for when an image manipulation app uses <canvas> both for UI previews and the actual work
+
-->
-
// compositing
attribute double <span title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default source-over)
@@ -40566,20 +40566,15 @@
- nested layers
- the ability to composite an entire set of drawing operations with one shadow all at once
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
+
-->
- // colors and styles
+ // colors and styles (see also the <span>CanvasLineStyles</span> interface)
attribute any <span title="dom-context-2d-strokeStyle">strokeStyle</span>; // (default black)
attribute any <span title="dom-context-2d-fillStyle">fillStyle</span>; // (default black)
<span>CanvasGradient</span> <span title="dom-context-2d-createLinearGradient">createLinearGradient</span>(double x0, double y0, double x1, double y1);
<span>CanvasGradient</span> <span title="dom-context-2d-createRadialGradient">createRadialGradient</span>(double x0, double y0, double r0, double x1, double y1, double r1);
<span>CanvasPattern</span> <span title="dom-context-2d-createPattern">createPattern</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, DOMString repetition);
- // line caps/joins
- attribute double <span title="dom-context-2d-lineWidth">lineWidth</span>; // (default 1)
- attribute DOMString <span title="dom-context-2d-lineCap">lineCap</span>; // "butt", "round", "square" (default "butt")
- attribute DOMString <span title="dom-context-2d-lineJoin">lineJoin</span>; // "round", "bevel", "miter" (default "miter")
- attribute double <span title="dom-context-2d-miterLimit">miterLimit</span>; // (default 10)
-
// shadows
attribute double <span title="dom-context-2d-shadowOffsetX">shadowOffsetX</span>; // (default 0)
attribute double <span title="dom-context-2d-shadowOffsetY">shadowOffsetY</span>; // (default 0)
@@ -40609,10 +40604,7 @@
void <span title="dom-context-2d-clip">clip</span>();
boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(double x, double y);
- // text
- attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 10px sans-serif)
- attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
- attribute DOMString <span title="dom-context-2d-textBaseline">textBaseline</span>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+ // text (see also the <span>CanvasText</span> interface)
void <span title="dom-context-2d-fillText">fillText</span>(DOMString text, double x, double y, optional double maxWidth);
void <span title="dom-context-2d-strokeText">strokeText</span>(DOMString text, double x, double y, optional double maxWidth);<!-- v6DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, double x, double y, optional double maxHeight);
@@ -40632,6 +40624,8 @@
void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
<span>CanvasRenderingContext2D</span> implements <span>CanvasTransformation</span>;
+<span>CanvasRenderingContext2D</span> implements <span>CanvasLineStyles</span>;
+<span>CanvasRenderingContext2D</span> implements <span>CanvasText</span>;
[NoInterfaceObject]
interface <dfn>CanvasTransformation</dfn> {
@@ -40645,9 +40639,25 @@
// v7 we've also received requests (though not many so far) for:
void skew(...); // is this common enough that one can't just use setTransform()?
void reflect(...); and void mirror(...); // aren't negative values in scale() sufficient for these?
--->
+-->};
+
+[NoInterfaceObject]
+interface <dfn>CanvasLineStyles</dfn> {
+ // line caps/joins
+ attribute double <span title="dom-context-2d-lineWidth">lineWidth</span>; // (default 1)
+ attribute DOMString <span title="dom-context-2d-lineCap">lineCap</span>; // "butt", "round", "square" (default "butt")
+ attribute DOMString <span title="dom-context-2d-lineJoin">lineJoin</span>; // "round", "bevel", "miter" (default "miter")
+ attribute double <span title="dom-context-2d-miterLimit">miterLimit</span>; // (default 10)
};
+[NoInterfaceObject]
+interface <dfn>CanvasText</dfn> {
+ // text
+ attribute DOMString <span title="dom-context-2d-font">font</span>; // (default 10px sans-serif)
+ attribute DOMString <span title="dom-context-2d-textAlign">textAlign</span>; // "start", "end", "left", "right", "center" (default: "start")
+ attribute DOMString <span title="dom-context-2d-textBaseline">textBaseline</span>; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
+};
+
interface <dfn>CanvasGradient</dfn> {
// opaque object
void <span title="dom-canvasgradient-addColorStop">addColorStop</span>(double offset, DOMString color);
@@ -41694,6 +41704,10 @@
<div class="impl">
+ <p>Objects that implement the <code>CanvasLineStyles</code>
+ interface have attributes (defined in this section) that control how
+ lines are treated by the object.</p>
+
<p>The <dfn
title="dom-context-2d-lineWidth"><code>lineWidth</code></dfn>
attribute gives the width of lines, in coordinate space units. On
@@ -41702,7 +41716,8 @@
value unchanged; other values must change the current value to the
new value.</p>
- <p>When the context is created, the <code
+ <p>When the object implementing the <code>CanvasLineStyles</code>
+ interface is created, the <code
title="dom-context-2d-lineWidth">lineWidth</code> attribute must
initially have the value <code>1.0</code>.</p>
@@ -41728,7 +41743,8 @@
must be changed to the new value; other values must ignored, leaving
the value unchanged.</p>
- <p>When the context is created, the <code
+ <p>When the object implementing the <code>CanvasLineStyles</code>
+ interface is created, the <code
title="dom-context-2d-lineCap">lineCap</code> attribute must
initially have the value <code>butt</code>.</p>
@@ -41746,7 +41762,8 @@
must be changed to the new value; other values must be ignored,
leaving the value unchanged.</p>
- <p>When the context is created, the <code
+ <p>When the object implementing the <code>CanvasLineStyles</code>
+ interface is created, the <code
title="dom-context-2d-lineJoin">lineJoin</code> attribute must
initially have the value <code>miter</code>.</p>
@@ -41765,7 +41782,7 @@
<p>A filled triangle connecting these two opposite corners with a
straight line, with the third point of the triangle being the join
- point, must be rendered at all joins. The <code
+ point, must be added at all joins. The <code
title="dom-context-2d-lineJoin">lineJoin</code> attribute controls
whether anything else is rendered. The three aforementioned values
have the following meanings:</p>
@@ -41777,10 +41794,10 @@
the two aforementioned corners of the join, abutting (and not
overlapping) the aforementioned triangle, with the diameter equal to
the line width and the origin at the point of the join, must be
- rendered at joins.</p>
+ added at joins.</p>
<p>The <code>miter</code> value means that a second filled triangle
- must (if it can given the miter length) be rendered at the join,
+ must (if it can given the miter length) be added at the join,
with one line being the line between the two aforementioned corners,
abutting the first triangle, and the other two being continuations of
the outside edges of the two joining lines, as long as required to
@@ -41791,7 +41808,7 @@
join. The miter limit ratio is the maximum allowed ratio of the
miter length to half the line width. If the miter length would cause
the miter limit ratio to be exceeded, this second triangle must not
- be rendered.</p>
+ be added.</p>
<p>The miter limit ratio can be explicitly set using the <dfn
title="dom-context-2d-miterLimit"><code>miterLimit</code></dfn>
@@ -41800,7 +41817,8 @@
the value unchanged; other values must change the current value to
the new value.</p>
- <p>When the context is created, the <code
+ <p>When the object implementing the <code>CanvasLineStyles</code>
+ interface is created, the <code
title="dom-context-2d-miterLimit">miterLimit</code> attribute must
initially have the value <code>10.0</code>.</p>
@@ -42808,39 +42826,14 @@
</dd>
- <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>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>The <dfn title="dom-context-2d-font"><code>font</code></dfn> IDL
attribute, on setting, must be parsed the same way as the 'font'
property of CSS (but without supporting property-independent style
@@ -42861,6 +42854,8 @@
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>
@@ -42886,21 +42881,22 @@
</div>
- <p>When the context is created, the font of the context must be set
- to 10px sans-serif. When the 'font-size' component is set to lengths
- using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller'
+ <p>When the object implementing the <code>CanvasText</code>
+ interface is created, the font of the context must be set to 10px
+ 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
+ <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
<code>Document</code></span>), then the relative keywords must be
interpreted relative to the normal-weight 10px sans-serif
- default.</p>
+ default.</p> <!-- XXX Path canvas issue again, twice -->
<p>The <dfn
title="dom-context-2d-textAlign"><code>textAlign</code></dfn> IDL
@@ -42909,7 +42905,8 @@
title="">end</code>, <code title="">left</code>, <code
title="">right</code>, or <code title="">center</code>, then the
value must be changed to the new value. Otherwise, the new value
- must be ignored. When the context is created, the <code
+ must be ignored. When the object implementing the
+ <code>CanvasText</code> interface is created, the <code
title="dom-context-2d-textAlign">textAlign</code> attribute must
initially have the value <code title="">start</code>.</p>
@@ -42925,7 +42922,8 @@
title="dom-context-2d-textBaseline-ideographic">ideographic</code>,
or <code title="dom-context-2d-textBaseline-bottom">bottom</code>,
then the value must be changed to the new value. Otherwise, the new
- value must be ignored. When the context is created, the <code
+ value must be ignored. When the object implementing the
+ <code>CanvasText</code> interface is created, the <code
title="dom-context-2d-textBaseline">textBaseline</code> attribute
must initially have the value <code title="">alphabetic</code>.</p>
@@ -42963,8 +42961,46 @@
</dl>
+ <hr>
+
+ <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
More information about the Commit-Watchers
mailing list