HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/7029

File a bug

SVNBugCommentTime (UTC)
7029[Gecko] [Internet Explorer] [Opera] [Webkit] Make it easier to do hit testing on canvas2012-03-26 05:11
Index: source
===================================================================
--- source	(revision 7028)
+++ source	(revision 7029)
@@ -3518,7 +3518,7 @@
   two strings as matches of each other.</p>
 
 
-  <Div class="impl">
+  <div class="impl">
 
   <h3>UTF-8</h3>
 
@@ -40037,7 +40037,7 @@
 --><!--END w3c-html--><!--FORK--><!--
 -->, but with no <span>interactive content</span> descendants except for <code>a</code> elements, <code>button</code> elements, <code>input</code> elements whose <code title="attr-input-type">type</code> attribute are in the <span title="attr-input-type-checkbox">Checkbox</span> or <span title="attr-input-type-radio">Radio Button</span> states, and <code>input</code> elements that are <span title="concept-button">buttons</span><!--
 --><!--START w3c-html--><!--FORK--><!--
--->.</dd> <!-- and maybe <select>, I guess? I've left it in for now, since I guess authors might make accessible selects if they're simple enough, and it's not obvious how to distinguish the simple ones from the complex ones... -->
+-->.</dd> <!-- and maybe <select>, I guess? I've left it our for now, since I guess authors might make accessible selects if they're simple enough, and it's not obvious how to distinguish the simple ones from the complex ones... -->
    <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code title="attr-canvas-width">width</code></dd>
@@ -40644,6 +40644,9 @@
   void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, double dx, double dy, double dw, double dh);
   void <span title="dom-context-2d-drawImage">drawImage</span>((<span>HTMLImageElement</span> or <span>HTMLCanvasElement</span> or <span>HTMLVideoElement</span>) image, double sx, double sy, double sw, double sh, double dx, double dy, double dw, double dh);
 
+  // hit regions
+  void <span title="dom-context-2d-addHitRegion">addHitRegion</span>(<span>HitRegionOptions</span> options);
+
   // pixel manipulation
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(double sw, double sh);
   <span>ImageData</span> <span title="dom-context-2d-createImageData">createImageData</span>(<span>ImageData</span> imagedata);
@@ -40701,6 +40704,19 @@
   readonly attribute double <span title="dom-textmetrics-width">width</span>;
 };
 
+dictionary <dfn>HitRegionOptions</dfn> {
+  <span>Path</span>? <span title="dom-HitRegionOptions-path">path</span> = null;
+  <span>SVGMatrix</span>? <span title="dom-HitRegionOptions-transform">transform</span> = null;
+  <span>DOMString</span> <span title="dom-HitRegionOptions-id">id</span> = '';
+  <span>DOMString</span>? <span title="dom-HitRegionOptions-parentID">parentID</span> = null;
+  <span>DOMString</span> <span title="dom-HitRegionOptions-cursor">cursor</span> = 'inherit';
+  // for control-backed regions:
+  <span>Element</span>? <span title="dom-HitRegionOptions-control">control</span> = null;
+  // for unbacked regions:
+  <span>DOMString</span>? <span title="dom-HitRegionOptions-label">label</span> = null;
+  <span>DOMString</span>? <span title="dom-HitRegionOptions-role">role</span> = null;
+};
+
 interface <dfn>ImageData</dfn> {
   readonly attribute unsigned long <span title="dom-imagedata-width">width</span>;
   readonly attribute unsigned long <span title="dom-imagedata-height">height</span>;
@@ -43326,9 +43342,10 @@
   generating the repeated pattern. When rendered, however, patterns
   must actually be painted only where the stroking or filling effect
   requires that they be drawn, and the repeated pattern must be
-  affected by the current transformation matrix. Pixels not covered by
-  the repeating pattern (if the <code>repeat</code> string was not
-  specified) must be transparent black.</p>
+  affected by the <span title="dom-context-2d-transformation">current
+  transformation matrix</span>. Pixels not covered by the repeating
+  pattern (if the <code>repeat</code> string was not specified) must
+  be transparent black.</p>
 
   <p>If the original image data is a bitmap image, the value painted
   at a point in the area of the repetitions is computed by filtering
@@ -43449,11 +43466,25 @@
 
   <p>The <dfn title="dom-context-2d-clearRect"><code>clearRect(<var
   title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
-  title="">h</var>)</code></dfn> method must clear the pixels in the
-  specified rectangle that also intersect the current clipping region
-  to a fully transparent black, erasing any previous image. If either
-  height or width are zero, this method has no effect.</p>
+  title="">h</var>)</code></dfn> method must run the following steps:</p>
 
+  <ol>
+
+   <li><p>Let <var title="">pixels</var> be the set of pixels in
+   the specified rectangle that also intersect the current clipping
+   region.</p></li>
+
+   <li><p>Clear the pixels in <var title="">pixels</var> to a fully
+   transparent black, erasing any previous image.</p></li>
+
+   <li><p><span>Clear regions that cover the pixels</span> in <var
+   title="">pixels</var> in the <code>canvas</code> element.</p></li>
+
+  </ol>
+
+  <p class="note">If either height or width are zero, this method has
+  no effect, since the set of pixels would be empty.</p>
+
   <p>The <dfn title="dom-context-2d-fillRect"><code>fillRect(<var
   title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
   title="">h</var>)</code></dfn> method must paint the specified
@@ -43923,8 +43954,8 @@
   provided, or the <span>current default path</span> otherwise.</p>
 
   <p>When the intended path is a <code>Path</code> object, the
-  coordinates of its subpaths must be transformed according to the
-  <code>CanvasRenderingContext2D</code> object's <span
+  coordinates and lines of its subpaths must be transformed according
+  to the <code>CanvasRenderingContext2D</code> object's <span
   title="dom-context-2d-transformation">current transformation
   matrix</span> when used by these methods (without affecting the
   <code>Path</code> object itself). When the intended path is the
@@ -44413,7 +44444,789 @@
   </div>
 
 
+  <h6>Hit regions</h6>
 
+  <p>Each <code>canvas</code> element whose <span>primary
+  context</span> is a <code>CanvasRenderingContext2D</code> object
+  must have a <dfn>hit region list</dfn> associated with its
+  bitmap.</p>
+
+  <p>The <span>hit region list</span> is a list of <span title="hit
+  region">hit regions</span>.</p>
+
+  <p>Each <dfn>hit region</dfn> consists of the following
+  information:</p>
+
+  <ul>
+
+   <li><p>A <dfn title="hit region's set of pixels">set of
+   pixels</dfn> on the <code>canvas</code> element's bitmap for which
+   this region is responsible.</p></li>
+
+   <li><p>A <dfn title="hit region's bounding circumference">bounding
+   circumference</dfn> on the <code>canvas</code> element's bitmap
+   that surrounds the <span>hit region's set of pixels</span> as they
+   stood when it was created.</p></li>
+
+   <li><p>Optionally, a non-empty string representing an <dfn
+   title="hit region's ID">ID</dfn> for distinguishing the region
+   from others.</p></li>
+
+   <li><p>Optionally, a reference to another region that acts as the
+   <dfn title="hit region's parent">parent</dfn> for this
+   one.</p></li>
+
+   <li><p>A count of regions that have this one as their <span
+   title="hit region's parent">parent</span>, known as the <dfn>hit
+   region's child count</dfn>.</p></li>
+
+   <li><p>A <dfn title="hit region's cursor specification">cursor
+   specification</dfn>, in the form of either a CSS cursor value, or
+   the string "<code title="">inherit</code>" meaning that the cursor
+   of the <span>hit region's parent</span>, if any, or of the
+   <code>canvas</code> element, if not, is to be used
+   instead.</p></li>
+
+   <li>
+
+    <p>Optionally, either a <span title="hit region's
+    control">control</span>, or an <span title="hit region's unbacked
+    region description">unbacked region description</span>.</p>
+
+    <p>A <dfn title="hit region's control">control</dfn> is just a
+    reference to an <code>Element</code> node, to which, in certain
+    conditions, the user agent will route events, and from which the
+    user agent will determine the state of the hit region for the
+    purposes of accessibility tools.</p>
+
+    <p>An <dfn title="hit region's unbacked region
+    description">unbacked region description</dfn> consists of the
+    following:</p>
+
+    <ul class="brief">
+
+     <li><p>Optionally, a <dfn title="hit region's
+     label">label</dfn>.</p>
+
+     <li><p>An <dfn title="hit region's ARIA role">ARIA role</dfn>,
+     which, if the <span title="hit region's unbacked region
+     description">unbacked region description</span> also has a label,
+     could be the empty string.</p></li>
+
+    </ul>
+
+   </li>
+
+  </ul>
+
+  <dl class="domintro">
+
+   <dt><var title="">context</var> . <code title="dom-context-2d-addHitRegion">addHitRegion</code>(<var title="">options</var>)</dt>
+
+   <dd>
+
+    <p>Adds a hit region to the canvas bitmap. The argument is an
+    object with the following members:</p>
+
+    <dl>
+
+     <dt><code title="dom-HitRegionOptions-path">path</code> (default null)
+
+     <dd>A <code>Path</code> object that describes the pixels that
+     form part of the region. If this member is not provided or is set
+     to null, the <span>current default path</span> is used
+     instead.</dd>
+
+     <dt><code title="dom-HitRegionOptions-transform">transform</code> (default null)
+
+     <dd>An <code>SVGMatrix</code> object that describes a
+     transformation to apply to the path described by the <code
+     title="dom-HitRegionOptions-path">path</code> member.</dd>
+
+     <dt><code title="dom-HitRegionOptions-id">id</code> (default empty string)
+
+     <dd>The ID to use for this region. This is used in
+     <code>MouseEvent</code> events on the <code>canvas</code> (<code
+     title="dom-MouseEvent-region">event.region</code>) and as a way
+     to reference this region in later calls to <code
+     title="dom-context-2d-addHitRegion">addHitRegion()</code>.</dd>
+
+     <dt><code title="dom-HitRegionOptions-parentID">parentID</code> (default null)
+
+     <dd>The ID of the parent region, for purposes of navigation by
+     accessibility tools and for cursor fallback.</dd>
+
+     <dt><code title="dom-HitRegionOptions-cursor">cursor</code> (default "<code title="">inherit</code>")
+
+     <dd>The cursor to use when the mouse is over this region. The
+     value "<code title="">inherit</code>" means to use the cursor for
+     the parent region (as specified by the <code
+     title="dom-HitRegionOptions-parentID">parentID</code> member), if
+     any, or to use the <code>canvas</code> element's cursor if the
+     region has no parent.</dd>
+
+     <dt><code title="dom-HitRegionOptions-control">control</code> (default null)
+
+     <dd>An element (that is a descendant of the <code>canvas</code>)
+     to which events are to be routed, and which accessibility tools
+     are to use as a surrogate for describing and interacting with
+     this region.</dd>
+
+     <dt><code title="dom-HitRegionOptions-label">label</code> (default null)
+
+     <dd>A text label for accessibility tools to use as a description
+     of this region, if there is no control.</dd>
+
+     <dt><code title="dom-HitRegionOptions-role">role</code> (default null)
+
+     <dd>An ARIA role for accessibility tools to use to determine how
+     to represent this region, if there is no control.</dd>
+
+    </dl>
+
+    <p>Hit regions can be used for a variety of purposes:</p>
+
+    <ul>
+
+     <li>With an ID, they can make hit detection easier by having the
+     user agent check which region the mouse is over and include the
+     ID in the mouse events.</li>
+
+     <li>With a control, they can make routing events to DOM elements
+     automatic, allowing e.g. clicks on a canvas to automatically
+     submit a form via a <code>button</code> element.</li>
+
+     <li>With a label, they can make it easier for users to explore a
+     canvas without seeing it, e.g. by touch on a mobile device.</li>
+
+     <li>With a cursor, they can make it easier for different regions
+     of the canvas to have different cursors, with the user agent
+     automatically switching between them.</li>
+
+    </ul>
+
+   </dd>
+
+  </dl>
+
+  <div class="impl">
+
+  <p>A <span>hit region</span> <var title="">A</var> is an
+  <dfn>ancestor region</dfn> of a <span>hit region</span> <var
+  title="">B</var> if <var title="">B</var> has a <span title="hit
+  region's parent">parent</span> and its <span title="hit region's
+  parent">parent</span> is either <var title="">A</var> or another
+  <span>hit region</span> for which <var title="">A</var> is an
+  <span>ancestor region</span>.</p>
+
+  <p><dfn>The region identified by the ID</dfn> <var
+  title="">ID</var> in a <code>canvas</code> element <var
+  title="">ancestor</var> is the value returned by the following
+  algorithm (which can return a <span>hit region</span> or
+  nothing):</p>
+
+  <ol>
+
+   <li><p>If <var title="">ID</var> is null, return nothing and abort
+   these steps.</p></li>
+
+   <li><p>Let <var title="">list</var> be the <span>hit region
+   list</span> associated with <var title="">ancestor</var>'s
+   bitmap.</p></li>
+
+   <li><p>If there is a <span>hit region</span> in <var
+   title="">list</var> whose <span title="hit region's ID">ID</span>
+   is a <span>case-sensitive</span> match for <var title="">ID</var>,
+   then return that <span>hit region</span> and abort these
+   steps.</p></li>
+
+   <li><p>Otherwise, return nothing.</p></li>
+
+  </ol>
+
+  <p><dfn>The region representing the control</dfn> <var
+  title="">control</var> for a <code>canvas</code> element <var
+  title="">ancestor</var> is the value returned by the following
+  algorithm (which can return a <span>hit region</span> or
+  nothing):</p>
+
+  <ol>
+
+   <li><p>If <var title="">control</var> is not a descendant of <var
+   title="">ancestor</var>, then return nothing and abort these
+   steps.</p></li>
+
+   <li><p>Let <var title="">list</var> be the <span>hit region
+   list</span> associatd with <var title="">ancestor</var>'s
+   bitmap.</p></li>
+
+   <li><p>If there is a <span>hit region</span> in <var
+   title="">list</var> whose <span title="hit region's
+   control">control</span> is <var title="">control</var>, then
+   return that <span>hit region</span> and abort these
+   steps.</p></li>
+
+   <li><p>Otherwise, return nothing.</p></li>
+
+  </ol>
+
+  <p><dfn>The control represented by a region</dfn> <var
+  title="">region</var> for a <code>canvas</code> element <var
+  title="">ancestor</var> is the value returned by the following
+  algorithm (which can return an element or nothing):</p>
+
+  <ol>
+
+   <li><p>If <var title="">region</var> has no <span title="hit
+   region's control">control</span>, return nothing and abort these
+   steps.</p></li>
+
+   <li><p>Let <var title="">control</var> be <var
+   title="">region</var>'s <span title="hit region's
+   control">control</span>.</p></li>
+
+   <li><p>If <var title="">control</var> is not a descendant of <var
+   title="">ancestor</var>, then return nothing and abort these
+   steps.</p></li>
+
+   <li><p>Otherwise, return <var title="">control</var>.</p></li>
+
+  </ol>
+
+  <p><dfn>The cursor for a hit region</dfn> <var
+  title="">region</var> of a <code>canvas</code> element <var
+  title="">ancestor</var> is the value returned by the following
+  algorithm:</p>
+
+  <ol>
+
+   <li><p><i>Loop</i>: If <var title="">region</var> has a <span
+   title="hit region's cursor specification">cursor
+   specification</span> other than "<code title="">inherit</code>",
+   then return that <span>hit region's cursor specification</span>
+   and abort these steps.</p></li>
+
+   <li><p>If <var title="">region</var> has a <span title="hit
+   region's parent">parent</span>, then let <var
+   title="">region</var> be that <span>hit region's parent</span>,
+   and return to the step labeled <i>loop</i>.</p></li>
+
+   <li><p>Otherwise, return the used value of the 'cursor' property
+   for the <code>canvas</code> element. <a
+   href="#refsCSSUI">[CSSUI]</a></p></li>
+
+  </ol>
+
+  <p><dfn>The region for a pixel</dfn> <var title="">pixel</var> on a
+  <code>canvas</code> element <var title="">ancestor</var> is the
+  value returned by the following algorithm (which can return a
+  <span>hit region</span> or nothing):</p>
+
+  <ol>
+
+   <li><p>Let <var title="">list</var> be the <span>hit region
+   list</span> associatd with <var title="">ancestor</var>'s
+   bitmap.</p></li>
+
+   <li><p>If there is a <span>hit region</span> in <var
+   title="">list</var> whose <span title="hit region's set of
+   pixels">set of pixels</span> contains <var title="">pixel</var>,
+   then return that <span>hit region</span> and abort these
+   steps.</p></li>
+
+   <li><p>Otherwise, return nothing.</p></li>
+
+  </ol>
+
+  <p>To <dfn>clear regions that cover the pixels</dfn> <var
+  title="">pixels</var> on a <code>canvas</code> element <var
+  title="">ancestor</var>, the user agent must run the following
+  steps:</p>
+
+  <ol>
+
+   <li><p>Let <var title="">list</var> be the <span>hit region
+   list</span> associatd with <var title="">ancestor</var>'s
+   bitmap.</p></li>
+
+   <li><p>Remove all pixels in <var title="">pixels</var> from the
+   <span title="hit region's set of pixels">set of pixels</span> of
+   each <span>hit region</span> in <var title="">list</var>.</p></li>
+
+   <li><p><i>Loop</i>: Let <var title="">victim</var> be the first
+   <span>hit region</span> in <var title="">list</var> to have an
+   empty <span title="hit region's set of pixels">set of
+   pixels</span> and a zero <span title="hit region's child
+   count">child count</span>, if any. If there is no such <span>hit
+   region</span>, abort these steps.</p></li>
+
+   <li><p>If <var title="">victim</var> has a <span title="hit
+   region's parent">parent</span>, then decrement that <span>hit
+   region's child count</span> by one.</p></li>
+
+   <li><p>Remove <var title="">victim</var> from <var
+   title="">list</var>.</p></li>
+
+   <li><p>Jump back to the step labeled <i>loop</i>.</p></li>
+
+  </ol>
+
+  <p class="note">Adding a new region and calling <code
+  title="dom-context-2d-clearRect">clearRect()</code> are the three
+  ways this clearing algorithm can be invoked. Resizing the canvas
+  also clears the <span>hit region list</span> (since it clears the
+  canvas back to its initial state).</p>
+
+  <hr>
+
+  <p>When the <dfn
+  title="dom-context-2d-addHitRegion"><code>addHitRegion()</code></dfn>
+  method is invoked, the user agent must run the following steps:</p>
+
+  <ol>
+
+   <li><p>Let <var title="">arguments</var> be the dictionary object
+   provided as the method's argument.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-path">path</code> member is not null,
+   let <var title="">source path</var> be the <code
+   title="dom-HitRegionOptions-path">path</code> member's value.
+   Otherwise, let it be the <code>CanvasRenderingContext2D</code>
+   object's <span>current default path</span>.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-path">path</code> member is null, but
+   the <code title="dom-HitRegionOptions-transform">transform</code>
+   member is not, then throw a <code>NotSupportedError</code>
+   exception and abort these steps.</p></li>
+
+   <li><p>Transform all the coordinates and lines in <var
+   title="">source path</var> by the transform matrix given by the
+   <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-transform">transform</code> member, if
+   it is not null.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-id">id</code> member is the
+   empty string, let it be null instead.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-id">id</code> member is not null, then
+   let <var title="">previous region for this ID</var> be <span>the
+   region identified by the ID</span> given by the <code
+   title="dom-HitRegionOptions-id">id</code> member's value in this
+   <code>canvas</code> element, if any. If the <code
+   title="dom-HitRegionOptions-id">id</code> member is null or no such
+   region currently exists, let <var title="">previous region for this
+   ID</var> be null.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-parent">parent</code> member is the
+   empty string, let it be null instead.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-parent">parent</code> member is not
+   null, then let <var title="">parent region</var> be <span>the
+   region identified by the ID</span> given by the <code
+   title="dom-HitRegionOptions-parent">parent</code> member's value in
+   this <code>canvas</code> element, if any. If the <code
+   title="dom-HitRegionOptions-parent">parent</code> member is null or
+   no such region currently exists, let <var title="">parent
+   region</var> be null.</p></li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-label">label</code> member is the
+   empty string, let it be null instead.</p></li>
+
+   <li>
+
+    <p>If any of the following conditions are met, throw a
+    <code>NotSupportedError</code> exception and abort these
+    steps.</p>
+
+    <ul class="brief">
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-path">path</code> member is null, but
+     its <code title="dom-HitRegionOptions-transform">transform</code>
+     member is not.</li>
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-control">control</code> and <code
+     title="dom-HitRegionOptions-label">label</code> members are both
+     non-null.</li>
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-control">control</code> and <code
+     title="dom-HitRegionOptions-role">role</code> members are both
+     non-null.</li>
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-role">role</code> member's value is
+     the empty string, and the <code
+     title="dom-HitRegionOptions-label">label</code> member's value is
+     either null or the empty string.</li>
+
+     <li>The <span>path</span> <var title="">source path</var>
+     describes a shape with no pixels.</li>
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-control">control</code> member is not
+     null but is neither an <code>a</code> element that
+     <span>represents</span> a <span>hyperlink</span>, a
+     <code>button</code> element, an <code>input</code> element whose
+     <code title="attr-input-type">type</code> attribute is in one of
+     the <span title="attr-input-type-checkbox">Checkbox</span> or
+     <span title="attr-input-type-radio">Radio Button</span> states,
+     nor an <code>input</code> element that is a <span
+     title="concept-button">button</span>.</li>
+
+     <li>The <var title="">parent region</var> is not null but has a
+     <span title="hit region's control">control</span>.</li>
+
+     <li>The <var title="">previous region for this ID</var> is the
+     same <span>hit region</span> as the <var title="">parent
+     region</var>.</li>
+
+     <li>The <var title="">previous region for this ID</var> is an
+     <span>ancestor region</span> of the <var title="">parent
+     region</var>.</li>
+
+    </ul>
+
+   </li>
+
+   <li><p>If the <code
+   title="dom-HitRegionOptions-parent">parent</code> member is not
+   null but <var title="">parent region</var> is null, then throw a
+   <code>NotFoundError</code> exception and abort these
+   steps.</p></li>
+
+   <li>
+
+    <p>If any of the following conditions are met, throw a
+    <code>SyntaxError</code> exception and abort these
+    steps.</p>
+
+    <ul class="brief">
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-cursor">cursor</code> member is not
+     null but is neither an <span>ASCII case-insensitive</span> match
+     for the string "<code title="">inherit</code>", nor a valid CSS
+     'cursor' property value. <a href="#refsCSSUI">[CSSUI]</a></li>
+
+     <li>The <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-role">role</code> member is not null
+     but its value is not an <span>ordered set of unique
+     space-separated tokens</span> whose tokens are all
+     <span>case-sensitive</span> matches for names of non-abstract
+     WAI-ARIA roles. <a href="#refsARIA">[ARIA]</a></li>
+
+    </ul>
+
+   </li>
+
+   <li>
+
+    <p>Let <var title="">region</var> be a newly created <span>hit
+    region</span>, with its information configured as follows:</p>
+
+    <dl>
+
+     <dt><span>Hit region's set of pixels</span>
+
+     <dd><p>The pixels contained in <var title="">source path</var>.
+
+
+     <dt><span>Hit region's bounding circumference</span>
+
+     <dd><p>A user-agent-defined shape that wraps the pixels contained
+     in <var title="">source path</var>. (In the simplest case, this
+     can just be the bounding rectangle; this specification allows it
+     to be any shape in order to allow other interfaces.)
+
+
+     <dt><span>Hit region's ID</span>
+
+     <dd><p>If the <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-id">id</code> member is not null: the
+     value of the <code title="dom-HitRegionOptions-id">id</code>
+     member. Otherwise, <var title="">region</var> has no <span
+     title="hit region's id">id</span>.
+
+
+     <dt><span>Hit region's parent</span>
+
+     <dd><p>If <var title="">parent region</var> is not null: <var
+     title="">parent region</var>. Otherwise, <var
+     title="">region</var> has no <span title="hit region's
+     parent">parent</span>.
+
+
+     <dt><span>Hit region's child count</span>
+
+     <dd><p>Initially zero.
+
+
+     <dt><span>Hit region's cursor specification</span>
+
+     <dd><p>If <var title="">parent region</var> is not null: <var
+     title="">parent region</var>. Otherwise, <var
+     title="">region</var> has no <span title="hit region's
+     parent">parent</span>.
+
+
+     <dt><span>Hit region's control</span>
+
+     <dd><p>If the <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-control">control</code> member is not
+     null: the value of the <code
+     title="dom-HitRegionOptions-control">control</code> member.
+     Otherwise, <var title="">region</var> has no <span title="hit
+     region's control">control</span>.
+
+
+     <dt><span>Hit region's label</span>
+
+     <dd><p>If the <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-label">label</code> member is not
+     null: the value of the <code
+     title="dom-HitRegionOptions-label">label</code> member.
+     Otherwise, <var title="">region</var> has no <span title="hit
+     region's label">label</span>.
+
+
+     <dt><span>Hit region's ARIA role</span>
+
+     <dd><p>If the <var title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-role">role</code> member is not null:
+     the value of the <code
+     title="dom-HitRegionOptions-role">role</code> member (which might
+     be the empty string). Otherwise, if the <var
+     title="">arguments</var> object's <code
+     title="dom-HitRegionOptions-label">label</code> member is not
+     null: the empty string. Otherwise, <var title="">region</var> has
+     no <span title="hit region's ARIA role">ARIA role</span>.
+
+
+    </dl>
+
+   </li>
+
+   <li>
+
+    <p>If the <var title="">arguments</var> object's <code
+    title="dom-HitRegionOptions-cursor">cursor</code> member is not
+    null, then act as if a CSS rule for the <code>canvas</code>
+    element setting its 'cursor' property had been seen, whose value
+    was the <span>hit region's cursor specification</span>.</p>
+
+    <p class="note">For example, if the user agent prefetches cursor
+    values, this would cause that to happen in response to an
+    appropriately-formed <code
+    title="dom-context-2d-addHitRegion">addHitRegion()</code>
+    call.</p>
+
+   </li>
+
+   <li><p>If the <var title="">arguments</var> object's <code
+   title="dom-HitRegionOptions-control">control</code> member is not
+   null, then let <var title="">previous region for the control</var>
+   be <span>the region representing the control</span> given by the
+   <code title="dom-HitRegionOptions-control">control</code> member's
+   value for this <code>canvas</code> element, if any. If the <code
+   title="dom-HitRegionOptions-control">control</code> member is null
+   or no such region currently exists, let <var title="">previous
+   region for the control</var> be null.</p></li>
+
+   <!-- the parent region can't have a control, because no region with
+   a control can be a parent - we check for that above. Thus, it is
+   safe to remove the previous region for the control without worrying
+   that our parent is going to be affected.
+
+   It's also safe to remove the previous region with this ID and all
+   its descendants, as we know that our parent isn't part of that
+   subtree. -->
+
+   <li><p>If there is a <var title="">previous region with this
+   control</var>, remove it from the <code>canvas</code> element's
+   <span>hit region list</span>; then, if it had a <span title="hit
+   region's parent">parent</span> region, decrement that <span>hit
+   region's child count</span> by one.</p></li> <!-- we garbage
+   collect the regions below -->
+
+   <li><p>If there is a <var title="">previous region with this
+   ID</var>, remove it, and all <span title="hit region">hit
+   regions</span> for which it is an <span>ancestor region</span>,
+   from the <code>canvas</code> element's <span>hit region
+   list</span>; then, if it had a <span title="hit region's
+   parent">parent</span> region, decrement that <span>hit region's
+   child count</span> by one.</p></li> <!-- we garbage collect the
+   regions below -->
+
+   <li><p>If there is a <var title="">parent region</var>, increment
+   its <span>hit region's child count</span> by one.</p></li>
+
+   <li><p><span>Clear regions that cover the pixels</span> in <var
+   title="">region</var>'s <span title="hit region's set of
+   pixels">set of pixels</span> on this <code>canvas</code>
+   element.</p></li> <!-- this is what garbage collects the earlier
+   regions -->
+
+   <li><p>Add <var title="">region</var> to the <code>canvas</code>
+   element's <span>hit region list</span>.</p></li>
+
+  </ol>
+
+  </div>
+
+  <hr>
+
+  <p>The <code>MouseEvent</code> interface is extended to support hit
+  regions:</p>
+
+  <pre class="idl">partial interface <span>MouseEvent</span> {
+  readonly attribute DOMString? <span title="dom-MouseEvent-region">region</span>;
+};
+
+partial dictionary <span>MouseEventInit</span> {
+  DOMString? region;
+};</pre>
+
+  <dl class="domintro">
+
+   <dt><var title="">event</var> . <code title="dom-MouseEvent-region">region</code></dt>
+
+   <dd>
+
+    <p>If the mouse was over a <span>hit region</span>, then this returns the <span>hit region's ID</span>, if it has one.</p>
+
+    <p>Otherwise, returns null.</p>
+
+   </dd>
+
+  </dl>
+
+  <div class="impl">
+
+  <p>The <dfn title="dom-MouseEvent-region"><code>region</code></dfn>
+  attribute on <code>MouseEvent</code> objects must return the value
+  it was initialized to. When the object is created, this attribute
+  must be initialized to null. It represents the <span>hit region's
+  ID</span> if the mouse was over a hit region when the event was
+  fired.</p>
+
+  <p>When a <code>MouseEvent</code> is to be fired at a
+  <code>canvas</code> element by the user agent in response to a
+  pointing device action, the user agent must instead follow these
+  steps. If these steps say to <i>act as normal</i>, that means that
+  the event must be fired as it would have had these requirements not
+  been applied.</p>
+
+  <ol>
+
+   <li><p>If the pointing device is not indicating a pixel on the
+   <code>canvas</code>, act as normal and abort these steps.</p></li>
+
+   <li><p>Let <var title="">pixel</var> be the pixel indicated by the
+   pointing device.</p></li>
+
+   <li><p>Let <var title="">region</var> be the <span>hit
+   region</span> that is <span title="the region for a pixel">the
+   region for the pixel</span> <var title="">pixel</var> on this
+   <code>canvas</code> element, if any.</p></li>
+
+   <li><p>If there is no <var title="">region</var>, then act as
+   normal and abort these steps.</p></li>
+
+   <li><p>Let <var title="">id</var> be the <var
+   title="">region</var>'s <span title="hit region's ID">ID</span>, if
+   any.</p></li>
+
+   <li><p>If there is an <var title="">id</var>, then initialize the
+   event object's <code title="dom-MouseEvent-region">region</code>
+   attribute to <var title="">id</var>.</p></li>
+
+   <li><p>Let <var title="">control</var> be the <var
+   title="">region</var>'s <span title="hit region's
+   control">control</span>, if any.</p></li>
+
+   <li><p>If there is a <var title="">control</var>, then target the
+   event object at <var title="">control</var> instead of the
+   <code>canvas</code> element.</p></li>
+
+   <li><p>Continue dispatching the event, but with the updated event
+   object and target as given in the above steps.</p></li>
+
+  </ol>
+
+  <hr>
+
+  <p>When a user's pointing device cursor is positioned over a
+  <code>canvas</code> element, user agents should render the pointing
+  device cursor according to the cursor specification described by
+  <span title="the cursor for a hit region">the cursor for the hit
+  region</span> that is <span title="the region for a pixel">the
+  region for the pixel</span> that the pointing device designates.</p>
+
+  <hr>
+
+  <p>User agents are encouraged to make use of the information present
+  in a <code>canvas</code> element's <span>hit region list</span> to
+  improve the accessibility of <code>canvas</code> elements.</p>
+
+  <p>Each <span>hit region</span> should be handled in a fashion
+  equivalent to a node in a virtual DOM tree rooted at the
+  <code>canvas</code> element. The hierarchy of this virtual DOM tree
+  must match the hierarchy of the <span title="hit region">hit
+  regions</span>, as described by the <span title="hit region's
+  parent">parent</span> of each region. Regions without a <span
+  title="hit region's parent">parent</span> must be treated as
+  children of the <code>canvas</code> element for the purpose of this
+  virtual DOM tree. For each node in such a DOM tree, the <span>hit
+  region's bounding circumference</span> gives the region of the
+  screen to use when representing the node (if appropriate).</p>
+
+  <p>The semantics of a <span>hit region</span> for the purposes of
+  this virtual DOM tree are those of the <span>hit region's
+  control</span>, if it has one, or else of a non-interactive element
+  whose ARIA role, if any, is that given by the <span>hit region's
+  ARIA role</span>, and whose textual representation, if any, is given
+  by the <span>hit region's label</span>.</p>
+
+  <p>For the purposes of accessibility tools, when an element <var
+  title="">C</var> is a descendant of a <code>canvas</code> element
+  and there is <span title="the region representing the control">a
+  region representing the control</span> <var title="">C</var> for that
+  <code>canvas</code> element, then the element's position relative to
+  the document should be presented as if it was that region in the
+  <code>canvas</code> element's virtual DOM tree.</p>
+
+  <p>The semantics of a <span>hit region</span> for the purposes of
+  this virtual DOM tree are those of the <span>hit region's
+  control</span>, if it has one, or else of a non-interactive element
+  whose ARIA role, if any, is that given by the <span>hit region's
+  ARIA role</span>, and whose textual representation, if any, is given
+  by the <span>hit region's label</span>.</p>
+
+  <p class="note">Thus, for instance, a user agent on a touch-screen
+  device could provide haptic feedback when the user croses over a
+  <span>hit region's bounding circumference</span>, and then read the
+  <span>hit region's label</span> to the user. Similarly, a desktop
+  user agent with a virtual accessibility focus separate from the
+  keyboard input focus could allow the user to navigate through the
+  hit regions, using the virtual DOM tree described above to enable
+  hierarchical navigation. When an interactive control inside the
+  <code>canvas</code> element is focused, if the control has a
+  corresponding region, then that <span>hit region's bounding
+  circumference</span> could be used to determine what area of the
+  display to magnify.</p>
+
+  </div>
+
+
   <h6><dfn>Pixel manipulation</dfn></h6>
 
   <dl class="domintro">

|