Short URL: http://html5.org/r/7029
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 7029 | 2012-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">