- From: poot <cvsmail@w3.org>
- Date: Tue, 06 Mar 2012 18:24:11 -0500
- To: public-html-diffs@w3.org
2Dapi; hixie: Factor our line style and text styles. (whatwg r7016)
http://dev.w3.org/cvsweb/html5/2dcontext/Overview.html?r1=1.122&r2=1.123&f=h
http://html5.org/tools/web-apps-tracker?from=7015&to=7016
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.122
retrieving revision 1.123
diff -u -d -r1.122 -r1.123
--- Overview.html 5 Mar 2012 23:04:38 -0000 1.122
+++ Overview.html 6 Mar 2012 23:23:57 -0000 1.123
@@ -320,7 +320,7 @@
<h1>HTML Canvas 2D Context</h1>
<h2 class="no-num no-toc" id="generatedID"></h2>
- <h2 class="no-num no-toc" id="editor-s-draft-5-march-2012">Editor's Draft 5 March 2012</h2>
+ <h2 class="no-num no-toc" id="editor-s-draft-6-march-2012">Editor's Draft 6 March 2012</h2>
<dl><dt>Latest Published Version:</dt>
<dd><a href="http://www.w3.org/TR/2dcontext/">http://www.w3.org/TR/2dcontext/</a></dd>
<dt>Latest Editor's Draft:</dt>
@@ -456,7 +456,7 @@
Group</a> is the W3C working group responsible for this
specification's progress along the W3C Recommendation
track.
- This specification is the 5 March 2012 Editor's Draft.
+ This specification is the 6 March 2012 Editor's Draft.
</p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>Work on this specification is also done at the <a href="http://www.whatwg.org/">WHATWG</a>. The W3C HTML working group
actively pursues convergence with the WHATWG, as required by the <a href="http://www.w3.org/2007/03/HTML-WG-charter">W3C HTML working
group charter</a>.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><p>This specification is an extension to the HTML5 language. All
@@ -512,24 +512,17 @@
void <a href="#dom-context-2d-save" title="dom-context-2d-save">save</a>(); // push state on state stack
void <a href="#dom-context-2d-restore" title="dom-context-2d-restore">restore</a>(); // pop state stack and restore state
-
// 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)
- // 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>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) 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)
@@ -559,10 +552,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);
<a href="#textmetrics">TextMetrics</a> <a href="#dom-context-2d-measuretext" title="dom-context-2d-measureText">measureText</a>(DOMString text);
@@ -580,6 +570,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> {
@@ -589,7 +581,23 @@
void <a href="#dom-context-2d-translate" title="dom-context-2d-translate">translate</a>(double x, double y);
void <a href="#dom-context-2d-transform" title="dom-context-2d-transform">transform</a>(double a, double b, double c, double d, double e, double f);
void <a href="#dom-context-2d-settransform" title="dom-context-2d-setTransform">setTransform</a>(double a, double b, double c, double d, double e, double f);
+};
+
+[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> {
@@ -1329,6 +1337,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,
@@ -1336,7 +1348,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
@@ -1358,7 +1371,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>
@@ -1372,7 +1386,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
@@ -1388,7 +1403,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>
@@ -1399,10 +1414,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
@@ -1413,7 +1428,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,
@@ -1421,7 +1436,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>
@@ -2198,37 +2214,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>
-
- <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>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>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
@@ -2248,6 +2239,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>
+
+
<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>
@@ -2271,27 +2264,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>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>
<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>
@@ -2300,7 +2295,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><p>The <code title="dom-context-2d-textBaseline"><a href="#dom-context-2d-textbaseline">textBaseline</a></code>
@@ -2323,8 +2319,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
Received on Tuesday, 6 March 2012 23:24:14 UTC