HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
7029[Gecko] [Internet Explorer] [Opera] [Webkit] Make it easier to do hit testing on canvas2012-03-26 05:11
@@ -3511,21 +3511,21 @@ is conforming depends on which specs apply, and leaves it at that. -->
   </div>
 
 
   <p>A string <var title="">pattern</var> is a <dfn>prefix match</dfn>
   for a string <var title="">s</var> when <var title="">pattern</var>
   is not longer than <var title="">s</var> and truncating <var
   title="">s</var> to <var title="">pattern</var>'s length leaves the
   two strings as matches of each other.</p>
 
 
-  <Div class="impl">
+  <div class="impl">
 
   <h3>UTF-8</h3>
 
   <p>When a user agent is required to <dfn title="decoded as UTF-8,
   with error handling">decode a byte string as UTF-8, with error
   handling</dfn>, it means that the byte stream must be converted to a
   Unicode string by interpreting it as UTF-8, except that any errors
   must be handled as described in the following list. Bytes in the
   following list are represented in hexadecimal. <a
   href="#refsRFC3629">[RFC3629]</a>
@@ -40030,21 +40030,21 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
    <dd><span>Phrasing content</span>.</dd>
    <dd><span>Embedded content</span>.</dd>
    <dd><span>Palpable content</span>.</dd>
    <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
    <dd>Where <span>embedded content</span> is expected.</dd>
    <dt><span title="element-dfn-content-model">Content model</span>:</dt>
    <dd><span>Transparent</span><!--
 --><!--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>
    <dd><code title="attr-canvas-height">height</code></dd>
    <dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--ADD-TOPIC:DOM APIs-->
    <dd>
     <pre class="idl">interface <dfn>HTMLCanvasElement</dfn> : <span>HTMLElement</span> {
            attribute unsigned long <span title="dom-canvas-width">width</span>;
            attribute unsigned long <span title="dom-canvas-height">height</span>;
 
@@ -40637,20 +40637,23 @@ dictionary <dfn>TrackEventInit</dfn> : <span>EventInit</span> {
   void <span title="dom-context-2d-strokeText">strokeText</span>(DOMString text, double x, double y, optional double maxWidth);<!-- v6DVT
   void <span title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text, double x, double y, optional double maxHeight);
   void <span title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(DOMString text, double x, double y, optional double maxHeight); -->
   <span>TextMetrics</span> <span title="dom-context-2d-measureText">measureText</span>(DOMString text);
 
   // drawing images
   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);
   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);
   <span>ImageData</span> <span title="dom-context-2d-getImageData">getImageData</span>(double sx, double sy, double sw, double sh);
   void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy);
   void <span title="dom-context-2d-putImageData">putImageData</span>(<span>ImageData</span> imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
 };
 <span>CanvasRenderingContext2D</span> implements <span>CanvasDrawingStyles</span>;
 <span>CanvasRenderingContext2D</span> implements <span>CanvasPathMethods</span>;
 
@@ -40694,20 +40697,33 @@ interface <dfn>CanvasGradient</dfn> {
 };
 
 interface <dfn>CanvasPattern</dfn> {
   // opaque object
 };
 
 interface <dfn>TextMetrics</dfn> {
   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>;
   readonly attribute <span>Uint8ClampedArray</span> <span title="dom-imagedata-data">data</span>;
 };
 
 [<span title="dom-DrawingStyle">Constructor</span>(optional <span>Element</span> scope)]
 interface <dfn>DrawingStyle</dfn> { };
 <span>DrawingStyle</span> implements <span>CanvasDrawingStyles</span>;
 
@@ -43319,23 +43335,24 @@ try {
   then repeated horizontally to the left and right, if the
   <code>repeat-x</code> string was specified, or vertically up and
   down, if the <code>repeat-y</code> string was specified, or in all
   four directions all over the canvas, if the <code>repeat</code>
   string was specified, to create the repeated pattern that is used
   for rendering. The images are not scaled by this process; one CSS
   pixel of the image must be painted on one coordinate space unit in
   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
   the original image data. The user agent may use any filtering
   algorithm (for example bilinear interpolation or nearest-neighbor).
   When the filtering algorithm requires a pixel value from outside the
   original image data, it must instead use the value from wrapping the
   pixel's coordinates to the original image's dimensions. (That is,
   the filter uses 'repeat' behavior, regardless of the value of
   <var title="">repetition</var>.)
@@ -43442,24 +43459,38 @@ try {
     <p>Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.</p>
 
    </dd>
 
   </dl>
 
   <div class="impl">
 
   <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
   rectangular area using the <code
   title="dom-context-2d-fillStyle">fillStyle</code>. If either height
   or width are zero, this method has no effect.</p>
 
   <p>The <dfn title="dom-context-2d-strokeRect"><code>strokeRect(<var
   title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var
@@ -43916,22 +43947,22 @@ v6DVT (also check for '- -' bits in the part above) -->
   title="dom-context-2d-beginPath"><code>beginPath()</code></dfn>
   method must empty the list of subpaths in the context's
   <span>current default path</span> so that the it once again has zero
   subpaths.</p>
 
   <p>Where the following method definitions use the term <i>intended
   path</i>, it means the <code>Path</code> argument, if one was
   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
   <span>current default path</span>, it is not affected by the
   transform. (This is because transformations already affect the
   <span>current default path</span> when it is constructed, so
   applying it when it is painted as well would result in a double
   transformation.)</p>
 
   <p>The <dfn title="dom-context-2d-fill"><code>fill()</code></dfn>
@@ -44406,20 +44437,802 @@ v6DVT (also check for '- -' bits in the part above) -->
   <p>Images are painted without affecting the current path, and are
   subject to <span title="shadows">shadow effects</span>, <span
   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>.</p>
 
   </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">
 
    <dt><var title="">imagedata</var> = <var title="">context</var> . <code title="dom-context-2d-createImageData">createImageData</code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
 
    <dd>
 
     <p>Returns an <code>ImageData</code> object with the given

|