HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
6125[Gecko] [Internet Explorer] [Opera] [Webkit] updated drawFocusRing to take recent feedback into account2011-05-11 00:08
@@ -169,20 +169,28 @@
   are currently published as separate specifications as well, and are
   not included in the W3C HTML5 specification, consist of:</p>
 
   <ul class="brief">
    <li><a href="#2dcontext">Canvas 2D Graphics Context</a><!--2DCONTEXT-->
    <li><a href="#microdata">Microdata</a><!--MD-->
    <li><a href="#mdvocabs">Microdata vocabularies</a>
    <li><a href="#crossDocumentMessages">Cross-document messaging</a> (also known as Communications)<!--POSTMSG-->
    <li><a href="#channel-messaging">Channel messaging</a> (also known as Communications)<!--POSTMSG-->
   </ul>
+  
+  <p>The specification that covers the Canvas 2D Graphics Context at
+  the W3C does not include all the advice included in the equivalent
+  section in this document, because of <a
+  href="http://lists.w3.org/Archives/Public/public-html/2011Apr/0712.html">the
+  discussion</a> that followed <a
+  href="http://lists.w3.org/Archives/Public/public-html/2011Apr/0271.html">a
+  working gorup decision from April 2011</a>.</p>
 
   <p>The <a href="#forms">forms</a> part of this specification was
   previously published separately in a specification known as Web
   Forms 2.</p>
 
   <p>Features that are not currently in this document that were in the
   past considered part of HTML5, or that were never part of HTML5 but
   have been referred to as part of HTML5 in the media, include:</p>
 
   <ul class="brief">
@@ -37668,21 +37676,21 @@ interface <dfn>TextTrackCue</dfn> {
   in each browser? -->
 
   </div>
 
   <!--END w3c-html--><!--2DCONTEXT-->
 
   <div data-component="HTML Canvas 2D Context (editor: Ian Hickson)">
 
   <h5 id="2dcontext">The 2D context</h5>
 
-  <!-- v2: we're on v4. suggestions for next version are marked v5. -->
+  <!-- v2: we're on v4.1. suggestions for next version are marked v5. -->
 
   <!--START 2dcontext-->
 
   <p>This specification defines the <dfn
   title="canvas-context-2d"><code>2d</code></dfn> context type, whose
   API is implemented using the <code>CanvasRenderingContext2D</code>
   interface.</p>
 
   <div class="impl">
 
@@ -37769,26 +37777,26 @@ interface <dfn>TextTrackCue</dfn> {
   void <span title="dom-context-2d-closePath">closePath</span>();
   void <span title="dom-context-2d-moveTo">moveTo</span>(in double x, in double y);
   void <span title="dom-context-2d-lineTo">lineTo</span>(in double x, in double y);
   void <span title="dom-context-2d-quadraticCurveTo">quadraticCurveTo</span>(in double cpx, in double cpy, in double x, in double y);
   void <span title="dom-context-2d-bezierCurveTo">bezierCurveTo</span>(in double cp1x, in double cp1y, in double cp2x, in double cp2y, in double x, in double y);
   void <span title="dom-context-2d-arcTo">arcTo</span>(in double x1, in double y1, in double x2, in double y2, in double radius);
   void <span title="dom-context-2d-rect">rect</span>(in double x, in double y, in double w, in double h);
   void <span title="dom-context-2d-arc">arc</span>(in double x, in double y, in double radius, in double startAngle, in double endAngle, in optional boolean anticlockwise);
   void <span title="dom-context-2d-fill">fill</span>();
   void <span title="dom-context-2d-stroke">stroke</span>();
+  void <span title="dom-context-2d-drawOSFocusRing">drawOSFocusRing</span>(in <span>Element</span> element);
+  boolean <span title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</span>(in <span>Element</span> element);
+  void <span title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</span>();
   void <span title="dom-context-2d-clip">clip</span>();
   boolean <span title="dom-context-2d-isPointInPath">isPointInPath</span>(in double x, in double y);
 
-  // focus management
-  boolean <span title="dom-context-2d-drawFocusRing">drawFocusRing</span>(in <span>Element</span> element, in double xCaret, in double yCaret, in optional boolean 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 double x, in double y, in optional double maxWidth);
   void <span title="dom-context-2d-strokeText">strokeText</span>(in DOMString text, in double x, in double y, in optional double maxWidth);<!-- v5DVT
   void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(in DOMString text, in double x, in double y, in optional double maxHeight);
   void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(in DOMString text, in double x, in double y, in optional double maxHeight); -->
   <span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(in DOMString text);
 
@@ -39339,20 +39347,56 @@ hairline width with transform. ack Shaun Morris.
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-stroke">stroke</code>()</dt>
 
    <dd>
 
     <p>Strokes the subpaths with the current stroke style.</p>
 
    </dd>
 
+   <dt><var title="">context</var> . <code title="dom-context-2d-drawOSFocusRing">drawOSFocusRing</code>(<var title="">element</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.</p>
+
+   </dd>
+
+   <dt><var title="">shouldDraw</var> = <var title="">context</var> . <code title="dom-context-2d-drawCustomFocusRing">drawCustomFocusRing</code>(<var title="">element</var>)</dt>
+
+   <dd>
+
+    <p>If the given element is focused, and the user has configured
+    his system to draw focus rings in a particular manner (for
+    example, high contrast focus rings), draws a focus ring around the
+    current path and returns false.</p>
+
+    <p>Otherwise, returns true if the given element is focused, and
+    false otherwise. This can thus be used to determine when to draw a
+    focus ring (see <a href="#drawCustomFocusRingExample">the
+    example</a> below).</p>
+
+   </dd>
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-scrollPathIntoView">scrollPathIntoView</code>()</dt>
+
+   <dd>
+
+    <p>Scrolls the current path into view. This is especially useful
+    on devices with small screens, where the whole canvas might not be
+    visible at once.</p>
+
+   </dd>
+
    <dt><var title="">context</var> . <code title="dom-context-2d-clip">clip</code>()</dt>
 
    <dd>
 
     <p>Further constrains the clipping region to the given path.</p>
 
    </dd>
 
    <dt><var title="">context</var> . <code title="dom-context-2d-isPointInPath">isPointInPath</code>(<var title="">x</var>, <var title="">y</var>)</dt>
 
@@ -39604,221 +39648,264 @@ hairline width with transform. ack Shaun Morris.
   title="dom-context-2d-globalAlpha">global alpha</span>, the <span
   title="clipping region">clipping region</span>, and <span
   title="dom-context-2d-globalCompositeOperation">global composition
   operators</span>. (Transformations affect the path when the path is
   created, not when it is painted, though the stroke <em>style</em> is
   still affected by the transformation during painting.)</p>
 
   <p>Zero-length line segments must be pruned before stroking a
   path. Empty subpaths must be ignored.</p>
 
-
-  <p>The <dfn title="dom-context-2d-clip"><code>clip()</code></dfn>
-  method must create a new <dfn>clipping region</dfn> by calculating
-  the intersection of the current clipping region and the area
-  described by the current path, using the non-zero winding number
-  rule. Open subpaths must be implicitly closed when computing the
-  clipping region, without affecting the actual subpaths. The new
-  clipping region replaces the current clipping region.</p>
-
-  <p>When the context is initialized, the clipping region must be set
-  to the rectangle with the top left corner at (0,0) and the width and
-  height of the coordinate space.</p>
-
-  <!-- v5
-   Jordan OSETE suggests:
-    * support ways of extending the clipping region (union instead of intersection)
-       - also "add", "subtract", "replace", "intersect" and "xor"
-    * support ways of resetting the clipping region without save/restore
-  -->
-
+  <hr>
 
   <p>The <dfn
-  title="dom-context-2d-isPointInPath"><code>isPointInPath(<var
-  title="">x</var>, <var title="">y</var>)</code></dfn> method must
-  return true if the point given by the <var title="">x</var> and <var
-  title="">y</var> coordinates passed to the method, when treated as
-  coordinates in the canvas coordinate space unaffected by the current
-  transformation, is inside the current path as determined by the
-  non-zero winding number rule; and must return false
-  otherwise. Points on the path itself are considered to be inside the
-  path. If either of the arguments is infinite or NaN, then the method
-  must return false.</p>
-
-  </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>
+  title="dom-context-2d-drawOSFocusRing"><code>drawOSFocusRing(<var
+  title="">element</var>)</code></dfn> method, when invoked,
+  must run the following steps:</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>
+  <ol>
 
-  <dl class="domintro">
+   <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 abort these steps.</p></li>
 
-   <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>
+   <li>
 
-   <dd>
+    <p>If the user has requested the use of particular focus rings
+    (e.g. high-contrast focus rings), or if the <var
+    title="">element</var> would have a focus ring drawn around it,
+    then draw a focus ring of the appropriate style along the path,
+    following platform conventions, and abort these steps.</p>
 
-    <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 class="note">Some platforms only draw focus rings around
+    elements that have been focused from the keyboard, and not those
+    focused from the mouse. Other platforms simply don't draw focus
+    rings around some elements at all unless relevant accessibility
+    features are enabled. This API is intended to follow these
+    conventions.</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>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>
 
-    <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>
+   </li>
 
-    <p>When the method returns true, the author is expected to
-    manually draw a focus ring.</p>
+   <li>
 
-   </dd>
+    <p>Optionally, <a href="#inform">inform the user</a> that the
+    focus is at the location given by the path. User agents may wait
+    until the next time the <span>event loop</span> reaches its
+    "update the rendering" step to optionally inform the user.</p>
 
-  </dl>
+   </li>
 
-  <div class="impl">
+  </ol>
 
   <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>
+  title="dom-context-2d-drawCustomFocusRing"><code>drawCustomFocusRing(<var
+  title="">element</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 use 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
+    (e.g. high-contrast focus rings), then draw a focus ring of the
+    appropriate style along the path, 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>Optionally, <a href="#inform">inform the user</a> that the
+    focus is at the location given by the path. User agents may wait
+    until the next time the <span>event loop</span> reaches its
+    "update the rendering" step to optionally inform the user.</p>
+
+   </li>
+
    <li><p>Return true.</p></li>
 
   </ol>
 
+  <p>The <dfn
+  title="dom-context-2d-scrollPathIntoView"><code>scrollPathIntoView()</code></dfn>
+  method, when invoked, must run the following steps:</p>
+
+  <ol>
+
+   <li><p>Let <var title="">notional child</var> be a hypothetical
+   element that is a rendered child of the <code>canvas</code> element
+   whose dimensions are exactly the rectangle of the bounding box of
+   the current path.</p></li>
+
+   <li><p><span title="scroll an element into view">Scroll <var
+   title="">notional child</var> into view</span> with the <var
+   title="">align to top flag</var> set.</p>
+
+   <li><p>Optionally, <a href="#inform">inform the user</a> that the
+   caret and/or selection cover <var title="">the specified
+   rectangle</var> of the canvas. User agents may wait until the next
+   time the <span>event loop</span> reaches its "update the rendering"
+   step to optionally inform the user.</p></li>
+
+  </ol>
+
+  <p class="note" id="inform">"Inform the user", as used in this
+  section, could mean calling a system accessibility API, which would
+  notify assistive technologies such as magnification tools. To
+  properly drive magnification based on a focus change, a system
+  accessibility API driving a screen magnifier needs the bounds for
+  the newly focused object. The methods above are intended to enable
+  this by allowing the user agent to report the bounding box of the
+  path used to render the focus ring as the bounds of the <var
+  title="">element</var> element passed as an argument, if that
+  element is focused, and the bounding box of the area to which the
+  user agent is scrolling as the bounding box of the current
+  selection.</p>
+
+  <hr>
+
+  <p>The <dfn title="dom-context-2d-clip"><code>clip()</code></dfn>
+  method must create a new <dfn>clipping region</dfn> by calculating
+  the intersection of the current clipping region and the area
+  described by the current path, using the non-zero winding number
+  rule. Open subpaths must be implicitly closed when computing the
+  clipping region, without affecting the actual subpaths. The new
+  clipping region replaces the current clipping region.</p>
+
+  <p>When the context is initialized, the clipping region must be set
+  to the rectangle with the top left corner at (0,0) and the width and
+  height of the coordinate space.</p>
+
+  <!-- v5
+   Jordan OSETE suggests:
+    * support ways of extending the clipping region (union instead of intersection)
+       - also "add", "subtract", "replace", "intersect" and "xor"
+    * support ways of resetting the clipping region without save/restore
+  -->
+
+  <hr>
+
+  <p>The <dfn
+  title="dom-context-2d-isPointInPath"><code>isPointInPath(<var
+  title="">x</var>, <var title="">y</var>)</code></dfn> method must
+  return true if the point given by the <var title="">x</var> and <var
+  title="">y</var> coordinates passed to the method, when treated as
+  coordinates in the canvas coordinate space unaffected by the current
+  transformation, is inside the current path as determined by the
+  non-zero winding number rule; and must return false
+  otherwise. Points on the path itself are considered to be inside the
+  path. If either of the arguments is infinite or NaN, then the method
+  must return false.</p>
+
   </div>
 
-  <div class="example">
 
-   <p>This <code>canvas</code> element has a couple of checkboxes:</p>
+  <div class="example" id="drawCustomFocusRingExample">
+
+   <p>This <code>canvas</code> element has a couple of checkboxes. The
+   path-related commands are highlighted:</p>
 
    <pre>&lt;canvas height=400 width=750>
  &lt;label>&lt;input type=checkbox id=showA> Show As&lt;/label>
  &lt;label>&lt;input type=checkbox id=showB> Show Bs&lt;/label>
  &lt;!-- ... -->
 &lt;/canvas>
 &lt;script>
- function drawCheckbox(context, element, x, y) {
+ function drawCheckbox(context, element, x, y, paint) {
    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();
+   if (paint) {
+<strong>     context.beginPath();
+     context.strokeStyle = 'black';
+     context.rect(x-5, y-5, 10, 10);
+     context.stroke();
+</strong>     if (element.checked) {
+<strong>       context.fillStyle = 'black';
+       context.fill();
+</strong>     }
+     context.fillText(element.labels[0].textContent, x+5, y);
    }
-   context.fillText(element.labels[0].textContent, x+5, y);
-   context.beginPath();
+<strong>   context.beginPath();
    context.rect(x-7, y-7, 12 + metrics.width+2, 14);
-   if (context.drawFocusRing(element, x, y, true)) {
+   if (paint && context.drawCustomFocusRing(element)) {
      context.strokeStyle = 'silver';
      context.stroke();
    }
-   context.restore();
+</strong>   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);
+   drawCheckbox(context, document.getElementById('showA'), 20, 40, true);
+   drawCheckbox(context, document.getElementById('showB'), 20, 60, true);
    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);
+   var x = event.clientX;
+   var y = event.clientY;
+   while (node) {
+     x -= node.offsetLeft - node.scrollLeft;
+     y -= node.offsetTop - node.scrollTop;
+     node = node.offsetParent;
+   }
+   drawCheckbox(context, document.getElementById('showA'), 20, 40, false);
    if (context.isPointInPath(x, y))
      document.getElementById('showA').checked = !(document.getElementById('showA').checked);
-   drawCheckbox(context, document.getElementById('showB'), 20, 60);
+   drawCheckbox(context, document.getElementById('showB'), 20, 60, false);
    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();
 &lt;/script></pre>
 <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/340 -->
 
   </div>
 
 
+
+
   <h6>Text</h6> <!-- a v3 feature -->
 
   <dl class="domintro">
 
    <dt><var title="">context</var> . <code title="dom-context-2d-font">font</code> [ = <var title="">value</var> ]</dt>
 
    <dd>
 
     <p>Returns the current font settings.</p>
 
@@ -41067,20 +41154,88 @@ function AddCloud(data, x, y) { ... }</pre>
 
    <li><p>Composite <var title="">A</var> within the <span>clipping
    region</span> over the current canvas bitmap using the current
    composition operator.</p></li>
 
   </ol>
 
   </div>
 
 
+  <h6>Best practices</h6>
+
+  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+  <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, as in the <a
+  href="#drawCustomFocusRingExample">example above</a>.</p>
+
+  <p>To indicate which focusable part of the canvas is currently
+  focused, authors should use the <code
+  title="dom-context-2d-drawOSFocusRing">drawOSFocusRing()</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.</p>
+
+  <p>Authors should avoid implementing text editing controls using the
+  <code>canvas</code> element. Doing so has a large number of
+  disadvantages:</p>
+
+  <ul>
+
+   <li>Mouse placement of the caret has to be reimplemented.</li>
+
+   <li>Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).</li>
+
+   <li>Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).</li>
+
+   <li>Native features such as copy-and-paste have to be reimplemented.</li>
+
+   <li>Native features such as spell-checking have to be reimplemented.</li>
+
+   <li>Native features such as drag-and-drop have to be reimplemented.</li>
+
+   <li>Native features such as page-wide text search have to be reimplemented.</li>
+
+   <li>Native features specific to the user, for example custom text
+   services, have to be reimplemented. This is close to impossible
+   since each user might have different services installed, and there
+   is an unbounded set of possible such services.</li>
+
+   <li>Bidirectional text editing has to be reimplemented.</li>
+
+   <li>For multiline text editing, line wrapping has to be implemented for all relevant languages.</li>
+
+   <li>Text selection has to be reimplemented.</li>
+
+   <li>Dragging of bidirectional text selections has to be reimplemented.</li>
+
+   <li>Platform-native keyboard shortcuts have to be reimplemented.</li>
+
+   <li>Platform-native input method editors (IMEs) have to be reimplemented.</li>
+
+   <li>Undo and redo functionality has to be reimplemented.</li>
+
+   <li>Accessibility features such as magnification following the
+   caret or selection have to be reimplemented.</li>
+
+  </ul>
+
+  <p>This is a huge amount of work, and authors are most strongly
+  encouraged to avoid doing any of it by instead using the
+  <code>input</code> element, the <code>textarea</code> element, or
+  the <code title="attr-contenteditable">contenteditable</code>
+  attribute.</p>
+
+
   <h6>Examples</h6>
 
   <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
 
   <div class="example">
 
   <p>Here is an example of a script that uses canvas to draw <a href="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUw%2BDQo8aHRtbCBsYW5nPSJlbiI%2BDQogPGhlYWQ%2BDQogIDx0aXRsZT5QcmV0dHkgR2xvd2luZyBMaW5lczwvdGl0bGU%2BDQogPC9oZWFkPg0KIDxib2R5Pg0KPGNhbnZhcyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCI%2BPC9jYW52YXM%2BDQo8c2NyaXB0Pg0KDQogdmFyIGNvbnRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnY2FudmFzJylbMF0uZ2V0Q29udGV4dCgnMmQnKTsNCg0KIHZhciBsYXN0WCA9IGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKTsNCiB2YXIgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KIHZhciBodWUgPSAwOw0KIGZ1bmN0aW9uIGxpbmUoKSB7DQogICBjb250ZXh0LnNhdmUoKTsNCiAgIGNvbnRleHQudHJhbnNsYXRlKGNvbnRleHQuY2FudmFzLndpZHRoLzIsIGNvbnRleHQuY2FudmFzLmhlaWdodC8yKTsNCiAgIGNvbnRleHQuc2NhbGUoMC45LCAwLjkpOw0KICAgY29udGV4dC50cmFuc2xhdGUoLWNvbnRleHQuY2FudmFzLndpZHRoLzIsIC1jb250ZXh0LmNhbnZhcy5oZWlnaHQvMik7DQogICBjb250ZXh0LmJlZ2luUGF0aCgpOw0KICAgY29udGV4dC5saW5lV2lkdGggPSA1ICsgTWF0aC5yYW5kb20oKSAqIDEwOw0KICAgY29udGV4dC5tb3ZlVG8obGFzdFgsIGxhc3RZKTsNCiAgIGxhc3RYID0gY29udGV4dC5jYW52YXMud2lkdGggKiBNYXRoLnJhbmRvbSgpOw0KICAgbGFzdFkgPSBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpOw0KICAgY29udGV4dC5iZXppZXJDdXJ2ZVRvKGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRleHQuY2FudmFzLndpZHRoICogTWF0aC5yYW5kb20oKSwNCiAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZXh0LmNhbnZhcy5oZWlnaHQgKiBNYXRoLnJhbmRvbSgpLA0KICAgICAgICAgICAgICAgICAgICAgICAgIGxhc3RYLCBsYXN0WSk7DQoNCiAgIGh1ZSA9IGh1ZSArIDEwICogTWF0aC5yYW5kb20oKTsNCiAgIGNvbnRleHQuc3Ryb2tlU3R5bGUgPSAnaHNsKCcgKyBodWUgKyAnLCA1MCUsIDUwJSknOw0KICAgY29udGV4dC5zaGFkb3dDb2xvciA9ICd3aGl0ZSc7DQogICBjb250ZXh0LnNoYWRvd0JsdXIgPSAxMDsNCiAgIGNvbnRleHQuc3Ryb2tlKCk7DQogICBjb250ZXh0LnJlc3RvcmUoKTsNCiB9DQogc2V0SW50ZXJ2YWwobGluZSwgNTApOw0KDQogZnVuY3Rpb24gYmxhbmsoKSB7DQogICBjb250ZXh0LmZpbGxTdHlsZSA9ICdyZ2JhKDAsMCwwLDAuMSknOw0KICAgY29udGV4dC5maWxsUmVjdCgwLCAwLCBjb250ZXh0LmNhbnZhcy53aWR0aCwgY29udGV4dC5jYW52YXMuaGVpZ2h0KTsNCiB9DQogc2V0SW50ZXJ2YWwoYmxhbmssIDQwKTsNCg0KPC9zY3JpcHQ%2BDQogPC9ib2R5Pg0KPC9odG1sPg0K">pretty glowing lines</a>.</p>
 
   <pre>&lt;canvas width="800" height="450">&lt;/canvas>
 &lt;script>

|