[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