[html5] r4465 - [giow] (2) drawFocusRing() support Fixing http://www.w3.org/Bugs/Public/show_bug [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Jan 4 18:54:33 PST 2010
Author: ianh
Date: 2010-01-04 18:54:29 -0800 (Mon, 04 Jan 2010)
New Revision: 4465
Modified:
complete.html
index
source
Log:
[giow] (2) drawFocusRing() support
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8210
Modified: complete.html
===================================================================
--- complete.html 2010-01-05 00:58:35 UTC (rev 4464)
+++ complete.html 2010-01-05 02:54:29 UTC (rev 4465)
@@ -462,11 +462,12 @@
<li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
<li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
<li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#text><span class=secno>4.8.11.1.9 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.11.1.10 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.13 </span>Examples</a></ol></li>
+ <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
+ <li><a href=#text><span class=secno>4.8.11.1.10 </span>Text</a></li>
+ <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.14 </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>
@@ -24521,7 +24522,7 @@
<h5 id=the-2d-context><span class=secno>4.8.11.1 </span>The 2D context</h5>
- <!-- v2: we're on v3. suggestions for next version are marked v4. -->
+ <!-- v2: we're on v4. suggestions for next version are marked v5. -->
<p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
method of a <code><a href=#the-canvas-element>canvas</a></code> element is invoked with <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> as the argument, a
@@ -24549,7 +24550,7 @@
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
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
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
@@ -24561,7 +24562,7 @@
void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
void skew(...);
void reflect(...); // or mirror(...)
-->
@@ -24569,7 +24570,7 @@
attribute float <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)
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
- turning off antialiasing to avoid seams when patterns are painted next to each other
- might be better to overdraw?
- might be better to just draw at a higher res then downsample, like for 3d?
@@ -24618,12 +24619,15 @@
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>(in float x, in float y);
+ // focus management
+ boolean <a href=#dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing>drawFocusRing</a>(in <span>Element</span> element, in float xCaret, in float yCaret, in optional canDrawCustom);
+
// 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")
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);
- void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v4DVT
+ void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v5DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight);
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight); -->
<a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(in DOMString text);
@@ -24754,7 +24758,7 @@
drawing state it describes. If there is no saved state, the method
must do nothing.</p>
- <!-- v4
+ <!-- v5
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
@@ -25068,7 +25072,7 @@
</dl><div class=impl>
- <!-- v4 feature requests:
+ <!-- v5 feature requests:
* Getting and setting colours by component to bypass the CSS value parsing.
@@ -25390,7 +25394,7 @@
<!-- drawImage() has an equivalent paragraph -->
<!--
- Requests for v4 features:
+ Requests for v5 features:
* apply transforms to patterns, so you don't have to create
transformed patterns manually by rendering them to an off-screen
canvas then using that canvas as the pattern.
@@ -25550,7 +25554,7 @@
initially have the value <code>10.0</code>.</p>
<!--
-v4: dashed lines have been requested. Philip Taylor provides these
+v5: dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
@@ -26062,7 +26066,7 @@
a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as the only point in the subpath.</p>
- <!-- v4 feature request:
+ <!-- v5 feature request:
* points as a primitive shape
http://home.comcast.net/~urbanjost/canvas/vogle4.html
-->
@@ -26114,7 +26118,7 @@
to the rectangle with the top left corner at (0,0) and the width and
height of the coordinate space.</p>
- <!-- v4
+ <!-- v5
Jordan OSETE suggests:
* support ways of extending the clipping region (union instead of intersection)
- also "add", "subtract", "replace", "intersect" and "xor"
@@ -26134,8 +26138,152 @@
</div>
- <h6 id=text><span class=secno>4.8.11.1.9 </span>Text</h6> <!-- a v3 feature -->
+ <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+ <p>When a canvas is interactive, authors should include focusable
+ elements in the element's fallback content corresponding to each
+ focusable part of the canvas.</p>
+
+ <p>To indicate which focusable part of the canvas is currently
+ focused, authors should use the <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing()</a></code> method,
+ passing it the element for which a ring is being drawn. This method
+ only draws the focus ring if the element is focused, so that it can
+ simply be called whenever drawing the element, without checking
+ whether the element is focused or not first. The position of the
+ center of the control, or of the editing caret if the control has
+ one, should be given in the <var title="">x</var> and <var title="">y</var> arguments.</p>
+
+ <dl class=domintro><dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [ <var title="">canDrawCustom</var> ])</dt>
+
+ <dd>
+
+ <p>If the given element is focused, draws a focus ring around the
+ current path, following the platform conventions for focus
+ rings. The given coordinate is used if the user's attention needs
+ to be brought to a particular position (e.g. if a magnifier is
+ following the editing caret in a text field).</p>
+
+ <p>If the <var title="">canDrawCustom</var> argument is true, then
+ the focus ring is only drawn if the user has configured his system
+ to draw focus rings in a particular manner. (For example, high
+ contrast focus rings.)</p>
+
+ <p>Returns true if the given element is focused, the <var title="">canDrawCustom</var> argument is true, and the user has
+ not configured his system to draw focus rings in a particular
+ manner. Otherwise, returns false.</p>
+
+ <p>When the method returns true, the author is expected to
+ manually draw a focus ring.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing><code>drawFocusRing(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [<var title="">canDrawCustom</var>])</code></dfn>
+ method, when invoked, must run the following steps:</p>
+
+ <ol><li><p>If <var title="">element</var> is not focused or is not a
+ descendant of the element with whose context the method is
+ associated, then return false and abort these steps.</li>
+
+ <li><p>Transform the given point (<var title="">x</var>, <var title="">y</var>) according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a>.</li>
+
+ <li><p>Optionally, inform the user that the focus is at the given
+ (transformed) coordinate on the canvas. (For example, this could
+ involve moving the user's magnification tool.)</li>
+
+ <li>
+
+ <p>If the user has requested the user of particular focus rings
+ (e.g. high-contrast focus rings), or if the <var title="">canDrawCustom</var> argument is absent or false, then
+ draw a focus ring of the appropriate style along the path,
+ following platform conventions, return false, and abort these
+ steps.</p>
+
+ <p>The focus ring should not be subject to the <a href=#shadows title=shadows>shadow effects</a>, the <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, or the <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>, but <em>should</em> be subject to the <a href=#clipping-region title="clipping region">clipping region</a>.</p>
+
+ </li>
+
+ <li><p>Return true.</li>
+
+ </ol></div>
+
+ <div class=example>
+
+ <p>This <code><a href=#the-canvas-element>canvas</a></code> element has a couple of checkboxes:</p>
+
+ <pre><canvas height=400 width=750>
+ <label><input type=checkbox id=showA> Show As</label>
+ <label><input type=checkbox id=showB> Show Bs</label>
+ <!-- ... -->
+</canvas>
+<script>
+ function drawCheckbox(context, element, x, y) {
+ context.save();
+ context.font = '10px sans-serif';
+ context.textAlign = 'left';
+ context.textBaseline = 'middle';
+ var metrics = context.measureText(element.labels[0].textContent);
+ context.beginPath();
+ context.strokeStyle = 'black';
+ context.rect(x-5, y-5, 10, 10);
+ context.stroke();
+ if (element.checked) {
+ context.fillStyle = 'black';
+ context.fill();
+ }
+ context.fillText(element.labels[0].textContent, x+5, y);
+ context.beginPath();
+ context.rect(x-7, y-7, 12 + metrics.width+2, 14);
+ if (context.drawFocusRing(element, x, y, true)) {
+ context.strokeStyle = 'silver';
+ context.stroke();
+ }
+ context.restore();
+ }
+ function drawBase() { /* ... */ }
+ function drawAs() { /* ... */ }
+ function drawBs() { /* ... */ }
+ function redraw() {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ drawBase();
+ if (document.getElementById('showA').checked)
+ drawAs();
+ if (document.getElementById('showB').checked)
+ drawBs();
+ }
+ function processClick(event) {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ var x = event.clientX - canvas.offsetLeft;
+ var y = event.clientY - canvas.offsetTop;
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showA').checked = !(document.getElementById('showA').checked);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showB').checked = !(document.getElementById('showB').checked);
+ redraw();
+ }
+ document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
+ redraw();
+</script></pre>
+<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
+
+ </div>
+
+
+ <h6 id=text><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
+
<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>
<dd>
@@ -26454,7 +26602,7 @@
</li>
- </ol><!--v4DVT - this is commented out until CSS can get its act together
+ </ol><!--v5DVT - 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?)
@@ -26600,7 +26748,7 @@
</ol>
-v4DVT (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>
+v5DVT (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
@@ -26629,8 +26777,8 @@
area of the canvas that the clipping region covers, not just the box
given by the em square height and measured text width.</p>
- <!-- v4: Drawing text along a given path -->
- <!-- v4: Adding text to a path -->
+ <!-- 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 -->
@@ -26643,7 +26791,7 @@
- <h6 id=images><span class=secno>4.8.11.1.10 </span>Images</h6>
+ <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</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>
@@ -26767,7 +26915,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>
@@ -27135,7 +27283,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</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>
@@ -27165,7 +27313,7 @@
</ol></div>
- <h6 id=examples><span class=secno>4.8.11.1.13 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: index
===================================================================
--- index 2010-01-05 00:58:35 UTC (rev 4464)
+++ index 2010-01-05 02:54:29 UTC (rev 4465)
@@ -459,11 +459,12 @@
<li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
<li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
<li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
- <li><a href=#text><span class=secno>4.8.11.1.9 </span>Text</a></li>
- <li><a href=#images><span class=secno>4.8.11.1.10 </span>Images</a></li>
- <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.11 </span>Pixel manipulation</a></li>
- <li><a href=#drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</a></li>
- <li><a href=#examples><span class=secno>4.8.11.1.13 </span>Examples</a></ol></li>
+ <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
+ <li><a href=#text><span class=secno>4.8.11.1.10 </span>Text</a></li>
+ <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
+ <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+ <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
+ <li><a href=#examples><span class=secno>4.8.11.1.14 </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>
@@ -24356,7 +24357,7 @@
<h5 id=the-2d-context><span class=secno>4.8.11.1 </span>The 2D context</h5>
- <!-- v2: we're on v3. suggestions for next version are marked v4. -->
+ <!-- v2: we're on v4. suggestions for next version are marked v5. -->
<p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
method of a <code><a href=#the-canvas-element>canvas</a></code> element is invoked with <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> as the argument, a
@@ -24384,7 +24385,7 @@
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
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
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
@@ -24396,7 +24397,7 @@
void <a href=#dom-context-2d-transform title=dom-context-2d-transform>transform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void <a href=#dom-context-2d-settransform title=dom-context-2d-setTransform>setTransform</a>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
void skew(...);
void reflect(...); // or mirror(...)
-->
@@ -24404,7 +24405,7 @@
attribute float <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)
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
- turning off antialiasing to avoid seams when patterns are painted next to each other
- might be better to overdraw?
- might be better to just draw at a higher res then downsample, like for 3d?
@@ -24453,12 +24454,15 @@
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>(in float x, in float y);
+ // focus management
+ boolean <a href=#dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing>drawFocusRing</a>(in <span>Element</span> element, in float xCaret, in float yCaret, in optional canDrawCustom);
+
// 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")
void <a href=#dom-context-2d-filltext title=dom-context-2d-fillText>fillText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);
- void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v4DVT
+ void <a href=#dom-context-2d-stroketext title=dom-context-2d-strokeText>strokeText</a>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v5DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight);
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight); -->
<a href=#textmetrics>TextMetrics</a> <a href=#dom-context-2d-measuretext title=dom-context-2d-measureText>measureText</a>(in DOMString text);
@@ -24589,7 +24593,7 @@
drawing state it describes. If there is no saved state, the method
must do nothing.</p>
- <!-- v4
+ <!-- v5
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
@@ -24903,7 +24907,7 @@
</dl><div class=impl>
- <!-- v4 feature requests:
+ <!-- v5 feature requests:
* Getting and setting colours by component to bypass the CSS value parsing.
@@ -25225,7 +25229,7 @@
<!-- drawImage() has an equivalent paragraph -->
<!--
- Requests for v4 features:
+ Requests for v5 features:
* apply transforms to patterns, so you don't have to create
transformed patterns manually by rendering them to an off-screen
canvas then using that canvas as the pattern.
@@ -25385,7 +25389,7 @@
initially have the value <code>10.0</code>.</p>
<!--
-v4: dashed lines have been requested. Philip Taylor provides these
+v5: dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
@@ -25897,7 +25901,7 @@
a new subpath with the point (<var title="">x</var>, <var title="">y</var>) as the only point in the subpath.</p>
- <!-- v4 feature request:
+ <!-- v5 feature request:
* points as a primitive shape
http://home.comcast.net/~urbanjost/canvas/vogle4.html
-->
@@ -25949,7 +25953,7 @@
to the rectangle with the top left corner at (0,0) and the width and
height of the coordinate space.</p>
- <!-- v4
+ <!-- v5
Jordan OSETE suggests:
* support ways of extending the clipping region (union instead of intersection)
- also "add", "subtract", "replace", "intersect" and "xor"
@@ -25969,8 +25973,152 @@
</div>
- <h6 id=text><span class=secno>4.8.11.1.9 </span>Text</h6> <!-- a v3 feature -->
+ <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+ <p>When a canvas is interactive, authors should include focusable
+ elements in the element's fallback content corresponding to each
+ focusable part of the canvas.</p>
+
+ <p>To indicate which focusable part of the canvas is currently
+ focused, authors should use the <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing()</a></code> method,
+ passing it the element for which a ring is being drawn. This method
+ only draws the focus ring if the element is focused, so that it can
+ simply be called whenever drawing the element, without checking
+ whether the element is focused or not first. The position of the
+ center of the control, or of the editing caret if the control has
+ one, should be given in the <var title="">x</var> and <var title="">y</var> arguments.</p>
+
+ <dl class=domintro><dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title=dom-context-2d-drawFocusRing><a href=#dom-context-2d-drawfocusring>drawFocusRing</a></code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [ <var title="">canDrawCustom</var> ])</dt>
+
+ <dd>
+
+ <p>If the given element is focused, draws a focus ring around the
+ current path, following the platform conventions for focus
+ rings. The given coordinate is used if the user's attention needs
+ to be brought to a particular position (e.g. if a magnifier is
+ following the editing caret in a text field).</p>
+
+ <p>If the <var title="">canDrawCustom</var> argument is true, then
+ the focus ring is only drawn if the user has configured his system
+ to draw focus rings in a particular manner. (For example, high
+ contrast focus rings.)</p>
+
+ <p>Returns true if the given element is focused, the <var title="">canDrawCustom</var> argument is true, and the user has
+ not configured his system to draw focus rings in a particular
+ manner. Otherwise, returns false.</p>
+
+ <p>When the method returns true, the author is expected to
+ manually draw a focus ring.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-context-2d-drawfocusring title=dom-context-2d-drawFocusRing><code>drawFocusRing(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [<var title="">canDrawCustom</var>])</code></dfn>
+ method, when invoked, must run the following steps:</p>
+
+ <ol><li><p>If <var title="">element</var> is not focused or is not a
+ descendant of the element with whose context the method is
+ associated, then return false and abort these steps.</li>
+
+ <li><p>Transform the given point (<var title="">x</var>, <var title="">y</var>) according to the <a href=#transformations title=dom-context-2d-transformation>current transformation
+ matrix</a>.</li>
+
+ <li><p>Optionally, inform the user that the focus is at the given
+ (transformed) coordinate on the canvas. (For example, this could
+ involve moving the user's magnification tool.)</li>
+
+ <li>
+
+ <p>If the user has requested the user of particular focus rings
+ (e.g. high-contrast focus rings), or if the <var title="">canDrawCustom</var> argument is absent or false, then
+ draw a focus ring of the appropriate style along the path,
+ following platform conventions, return false, and abort these
+ steps.</p>
+
+ <p>The focus ring should not be subject to the <a href=#shadows title=shadows>shadow effects</a>, the <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>global alpha</a>, or the <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>global composition
+ operators</a>, but <em>should</em> be subject to the <a href=#clipping-region title="clipping region">clipping region</a>.</p>
+
+ </li>
+
+ <li><p>Return true.</li>
+
+ </ol></div>
+
+ <div class=example>
+
+ <p>This <code><a href=#the-canvas-element>canvas</a></code> element has a couple of checkboxes:</p>
+
+ <pre><canvas height=400 width=750>
+ <label><input type=checkbox id=showA> Show As</label>
+ <label><input type=checkbox id=showB> Show Bs</label>
+ <!-- ... -->
+</canvas>
+<script>
+ function drawCheckbox(context, element, x, y) {
+ context.save();
+ context.font = '10px sans-serif';
+ context.textAlign = 'left';
+ context.textBaseline = 'middle';
+ var metrics = context.measureText(element.labels[0].textContent);
+ context.beginPath();
+ context.strokeStyle = 'black';
+ context.rect(x-5, y-5, 10, 10);
+ context.stroke();
+ if (element.checked) {
+ context.fillStyle = 'black';
+ context.fill();
+ }
+ context.fillText(element.labels[0].textContent, x+5, y);
+ context.beginPath();
+ context.rect(x-7, y-7, 12 + metrics.width+2, 14);
+ if (context.drawFocusRing(element, x, y, true)) {
+ context.strokeStyle = 'silver';
+ context.stroke();
+ }
+ context.restore();
+ }
+ function drawBase() { /* ... */ }
+ function drawAs() { /* ... */ }
+ function drawBs() { /* ... */ }
+ function redraw() {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ drawBase();
+ if (document.getElementById('showA').checked)
+ drawAs();
+ if (document.getElementById('showB').checked)
+ drawBs();
+ }
+ function processClick(event) {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ var x = event.clientX - canvas.offsetLeft;
+ var y = event.clientY - canvas.offsetTop;
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showA').checked = !(document.getElementById('showA').checked);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showB').checked = !(document.getElementById('showB').checked);
+ redraw();
+ }
+ document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
+ redraw();
+</script></pre>
+<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
+
+ </div>
+
+
+ <h6 id=text><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
+
<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>
<dd>
@@ -26289,7 +26437,7 @@
</li>
- </ol><!--v4DVT - this is commented out until CSS can get its act together
+ </ol><!--v5DVT - 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?)
@@ -26435,7 +26583,7 @@
</ol>
-v4DVT (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>
+v5DVT (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
@@ -26464,8 +26612,8 @@
area of the canvas that the clipping region covers, not just the box
given by the em square height and measured text width.</p>
- <!-- v4: Drawing text along a given path -->
- <!-- v4: Adding text to a path -->
+ <!-- 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 -->
@@ -26478,7 +26626,7 @@
- <h6 id=images><span class=secno>4.8.11.1.10 </span>Images</h6>
+ <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</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>
@@ -26602,7 +26750,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>
@@ -26970,7 +27118,7 @@
<div class=impl>
- <h6 id=drawing-model><span class=secno>4.8.11.1.12 </span>Drawing model</h6>
+ <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</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>
@@ -27000,7 +27148,7 @@
</ol></div>
- <h6 id=examples><span class=secno>4.8.11.1.13 </span>Examples</h6>
+ <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
<p><i>This section is non-normative.</i></p>
Modified: source
===================================================================
--- source 2010-01-05 00:58:35 UTC (rev 4464)
+++ source 2010-01-05 02:54:29 UTC (rev 4465)
@@ -26438,7 +26438,7 @@
<h5>The 2D context</h5>
- <!-- v2: we're on v3. suggestions for next version are marked v4. -->
+ <!-- v2: we're on v4. suggestions for next version are marked v5. -->
<p>When the <code title="dom-canvas-getContext">getContext()</code>
method of a <code>canvas</code> element is invoked with <dfn
@@ -26469,7 +26469,7 @@
void <span title="dom-context-2d-save">save</span>(); // push state on state stack
void <span title="dom-context-2d-restore">restore</span>(); // pop state stack and restore state
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
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
@@ -26481,7 +26481,7 @@
void <span title="dom-context-2d-transform">transform</span>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void <span title="dom-context-2d-setTransform">setTransform</span>(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
void skew(...);
void reflect(...); // or mirror(...)
-->
@@ -26489,7 +26489,7 @@
attribute float <span title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default source-over)
<!--
- // v4 we've also received requests for:
+ // v5 we've also received requests for:
- turning off antialiasing to avoid seams when patterns are painted next to each other
- might be better to overdraw?
- might be better to just draw at a higher res then downsample, like for 3d?
@@ -26538,12 +26538,15 @@
void <span title="dom-context-2d-clip">clip</span>();
boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(in float x, in float y);
+ // focus management
+ boolean <span title="dom-context-2d-drawFocusRing">drawFocusRing</span>(in <span>Element</span> element, in float xCaret, in float yCaret, in optional canDrawCustom);
+
// 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")
void <span title="dom-context-2d-fillText">fillText</span>(in DOMString text, in float x, in float y, in optional float maxWidth);
- void <span title="dom-context-2d-strokeText">strokeText</span>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v4DVT
+ void <span title="dom-context-2d-strokeText">strokeText</span>(in DOMString text, in float x, in float y, in optional float maxWidth);<!-- v5DVT
void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight);
void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in float x, in float y, in optional float maxHeight); -->
<span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(in DOMString text);
@@ -26704,7 +26707,7 @@
drawing state it describes. If there is no saved state, the method
must do nothing.</p>
- <!-- v4
+ <!-- v5
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
@@ -27069,7 +27072,7 @@
<div class="impl">
- <!-- v4 feature requests:
+ <!-- v5 feature requests:
* Getting and setting colours by component to bypass the CSS value parsing.
@@ -27473,7 +27476,7 @@
<!-- drawImage() has an equivalent paragraph -->
<!--
- Requests for v4 features:
+ Requests for v5 features:
* apply transforms to patterns, so you don't have to create
transformed patterns manually by rendering them to an off-screen
canvas then using that canvas as the pattern.
@@ -27652,7 +27655,7 @@
initially have the value <code>10.0</code>.</p>
<!--
-v4: dashed lines have been requested. Philip Taylor provides these
+v5: dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
@@ -28276,7 +28279,7 @@
title="">y</var>) as the only point in the subpath.</p>
- <!-- v4 feature request:
+ <!-- v5 feature request:
* points as a primitive shape
http://home.comcast.net/~urbanjost/canvas/vogle4.html
-->
@@ -28336,7 +28339,7 @@
to the rectangle with the top left corner at (0,0) and the width and
height of the coordinate space.</p>
- <!-- v4
+ <!-- v5
Jordan OSETE suggests:
* support ways of extending the clipping region (union instead of intersection)
- also "add", "subtract", "replace", "intersect" and "xor"
@@ -28359,6 +28362,171 @@
</div>
+ <h6>Focus management</h6> <!-- a v4 feature -->
+
+ <p>When a canvas is interactive, authors should include focusable
+ elements in the element's fallback content corresponding to each
+ focusable part of the canvas.</p>
+
+ <p>To indicate which focusable part of the canvas is currently
+ focused, authors should use the <code
+ title="dom-context-2d-drawFocusRing">drawFocusRing()</code> method,
+ passing it the element for which a ring is being drawn. This method
+ only draws the focus ring if the element is focused, so that it can
+ simply be called whenever drawing the element, without checking
+ whether the element is focused or not first. The position of the
+ center of the control, or of the editing caret if the control has
+ one, should be given in the <var title="">x</var> and <var
+ title="">y</var> arguments.</p>
+
+ <dl class="domintro">
+
+ <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawFocusRing">drawFocusRing</code>(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>, [ <var title="">canDrawCustom</var> ])</dt>
+
+ <dd>
+
+ <p>If the given element is focused, draws a focus ring around the
+ current path, following the platform conventions for focus
+ rings. The given coordinate is used if the user's attention needs
+ to be brought to a particular position (e.g. if a magnifier is
+ following the editing caret in a text field).</p>
+
+ <p>If the <var title="">canDrawCustom</var> argument is true, then
+ the focus ring is only drawn if the user has configured his system
+ to draw focus rings in a particular manner. (For example, high
+ contrast focus rings.)</p>
+
+ <p>Returns true if the given element is focused, the <var
+ title="">canDrawCustom</var> argument is true, and the user has
+ not configured his system to draw focus rings in a particular
+ manner. Otherwise, returns false.</p>
+
+ <p>When the method returns true, the author is expected to
+ manually draw a focus ring.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <p>The <dfn
+ title="dom-context-2d-drawFocusRing"><code>drawFocusRing(<var
+ title="">element</var>, <var title="">x</var>, <var
+ title="">y</var>, [<var title="">canDrawCustom</var>])</code></dfn>
+ method, when invoked, must run the following steps:</p>
+
+ <ol>
+
+ <li><p>If <var title="">element</var> is not focused or is not a
+ descendant of the element with whose context the method is
+ associated, then return false and abort these steps.</p></li>
+
+ <li><p>Transform the given point (<var title="">x</var>, <var
+ title="">y</var>) according to the <span
+ title="dom-context-2d-transformation">current transformation
+ matrix</span>.</p></li>
+
+ <li><p>Optionally, inform the user that the focus is at the given
+ (transformed) coordinate on the canvas. (For example, this could
+ involve moving the user's magnification tool.)</p></li>
+
+ <li>
+
+ <p>If the user has requested the user of particular focus rings
+ (e.g. high-contrast focus rings), or if the <var
+ title="">canDrawCustom</var> argument is absent or false, then
+ draw a focus ring of the appropriate style along the path,
+ following platform conventions, return false, and abort these
+ steps.</p>
+
+ <p>The focus ring should not be subject to the <span
+ title="shadows">shadow effects</span>, the <span
+ title="dom-context-2d-globalAlpha">global alpha</span>, or the <span
+ title="dom-context-2d-globalCompositeOperation">global composition
+ operators</span>, but <em>should</em> be subject to the <span
+ title="clipping region">clipping region</span>.</p>
+
+ </li>
+
+ <li><p>Return true.</p></li>
+
+ </ol>
+
+ </div>
+
+ <div class="example">
+
+ <p>This <code>canvas</code> element has a couple of checkboxes:</p>
+
+ <pre><canvas height=400 width=750>
+ <label><input type=checkbox id=showA> Show As</label>
+ <label><input type=checkbox id=showB> Show Bs</label>
+ <!-- ... -->
+</canvas>
+<script>
+ function drawCheckbox(context, element, x, y) {
+ context.save();
+ context.font = '10px sans-serif';
+ context.textAlign = 'left';
+ context.textBaseline = 'middle';
+ var metrics = context.measureText(element.labels[0].textContent);
+ context.beginPath();
+ context.strokeStyle = 'black';
+ context.rect(x-5, y-5, 10, 10);
+ context.stroke();
+ if (element.checked) {
+ context.fillStyle = 'black';
+ context.fill();
+ }
+ context.fillText(element.labels[0].textContent, x+5, y);
+ context.beginPath();
+ context.rect(x-7, y-7, 12 + metrics.width+2, 14);
+ if (context.drawFocusRing(element, x, y, true)) {
+ context.strokeStyle = 'silver';
+ context.stroke();
+ }
+ context.restore();
+ }
+ function drawBase() { /* ... */ }
+ function drawAs() { /* ... */ }
+ function drawBs() { /* ... */ }
+ function redraw() {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ drawBase();
+ if (document.getElementById('showA').checked)
+ drawAs();
+ if (document.getElementById('showB').checked)
+ drawBs();
+ }
+ function processClick(event) {
+ var canvas = document.getElementsByTagName('canvas')[0];
+ var context = canvas.getContext('2d');
+ var x = event.clientX - canvas.offsetLeft;
+ var y = event.clientY - canvas.offsetTop;
+ drawCheckbox(context, document.getElementById('showA'), 20, 40);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showA').checked = !(document.getElementById('showA').checked);
+ drawCheckbox(context, document.getElementById('showB'), 20, 60);
+ if (context.isPointInPath(x, y))
+ document.getElementById('showB').checked = !(document.getElementById('showB').checked);
+ redraw();
+ }
+ document.getElementsByTagName('canvas')[0].addEventListener('focus', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('blur', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('change', redraw, true);
+ document.getElementsByTagName('canvas')[0].addEventListener('click', processClick, false);
+ redraw();
+</script></pre>
+<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
+
+ </div>
+
+
<h6>Text</h6> <!-- a v3 feature -->
<dl class="domintro">
@@ -28762,7 +28930,7 @@
</ol>
-<!--v4DVT - this is commented out until CSS can get its act together
+<!--v5DVT - 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?)
@@ -28908,7 +29076,7 @@
</ol>
-v4DVT (also check for '- -' bits in the part above) -->
+v5DVT (also check for '- -' bits in the part above) -->
<p>The <dfn
title="dom-context-2d-measureText"><code>measureText()</code></dfn>
@@ -28946,8 +29114,8 @@
area of the canvas that the clipping region covers, not just the box
given by the em square height and measured text width.</p>
- <!-- v4: Drawing text along a given path -->
- <!-- v4: Adding text to a path -->
+ <!-- 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 -->
More information about the Commit-Watchers
mailing list