A hit region list is a list of hit regions for a bitmap.
Each hit region consists of the following information:
A set of pixels on the bitmap for which this region is responsible.
A bounding circumference on the bitmap that surrounds the hit region's set of pixels as they stood when it was created.
A control.
A control
is just a reference to an Element
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. (The control is ignored when it is
not a descendant of the canvas
element.)
addHitRegion
(options)Adds a hit region to the bitmap based on the current default path. The argument is an object with the following members:
fillRule
(default "nonzero
") id
(default empty string)
MouseEvent
events on the canvas
(event.region
) and as a
way to reference this region in later calls to addHitRegion()
.control
(default null) canvas
) to
which events are to be routed, and which accessibility tools are to
use as a surrogate for describing and interacting with this region.Hit regions can be used for a variety of purposes:
canvas
to
automatically submit a form via a button
element.removeHitRegion
(id)Removes a hit region
from the canvas
bitmap. The argument is the ID of a region added using addHitRegion()
.
The pixels that were covered by this region are effectively cleared by this operation, leaving the regions non-interactive. In particular, regions that occupied the same pixels before the removed regions were added, overlapping them, do not resume their previous role.
The region identified by the ID ID in a bitmap bitmap is the value returned by the following algorithm (which can return a hit region or nothing):
If ID is null, return nothing and abort these steps.
Let list be the hit region list associated with bitmap.
If there is a hit region in list whose ID is a case-sensitive match for ID, then return that hit region and abort these steps.
Otherwise, return nothing.
The region representing the control control for a bitmap bitmap is the value returned by the following algorithm (which can return a hit region or nothing):
Let list be the hit region list associated with bitmap.
If there is a hit region in list whose control is control, then return that hit region and abort these steps.
Otherwise, return nothing.
The control represented
by a region region for a canvas
element ancestor is the value returned
by the following algorithm (which can return an element or nothing):
If region has no control, return nothing and abort these steps.
Let control be region's control.
If control is not a descendant of ancestor, then return nothing and abort these steps.
Otherwise, return control.
The region for a pixel pixel on a bitmap bitmap is the value returned by the following algorithm (which can return a hit region or nothing):
Let list be the hit region list associated with bitmap.
If there is a hit region in list whose set of pixels contains pixel, then return that hit region and abort these steps.
Otherwise, return nothing.
To clear regions that cover the pixels pixels on a bitmap bitmap, the user agent must run the following steps:
Let list be the hit region list associated with bitmap.
Remove all pixels in pixels from the set of pixels of each hit region in list.
Garbage-collect the regions of bitmap.
To garbage-collect the regions of a bitmap bitmap, the user agent must run the following steps:
Let list be the hit region list associated with bitmap.
Loop: Let victim be the first hit region in list to have an empty set of pixels . If there is no such hit region, abort these steps.
Remove victim from list.
Jump back to the step labeled loop.
Adding a new region and calling clearRect()
are the two
ways this clearing algorithm can be invoked. The hit
region list itself is also reset when the rendering context is
reset, e.g. when a CanvasRenderingContext2D
object is bound to or unbound from a canvas
, or when the
dimensions of the bitmap are changed.
When the addHitRegion()
method is invoked, the user agent must run the following steps:
Let arguments be the dictionary object provided as the method's argument.
Let path
be the CanvasRenderingContext2D
object's current default path.
Let specified pixels be the pixels
contained in source path, using the
fill rule indicated by the fillRule
member.
If the arguments object's id
member is the empty string, let it be null instead.
If the arguments object's id
member is not null, then let previous
region for this ID be the
region identified by the ID given by the id
member's value in this scratch bitmap,
if any. If the id
member is null or no such region currently exists, let previous
region for this ID be null.
If any of the following conditions are met, throw a NotSupportedError
exception and abort these steps.
Let region be a newly created hit region, with its information configured as follows:
The specified pixels
A user-agent-defined shape that wraps the pixels contained in source path. (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.)
If the arguments object's id
member is
not null: the value of the id
member. Otherwise, region has no
id.
If the arguments object's control
member is not null: the value of the control
member. Otherwise, region has no
control.
If the arguments object's control
member is not null, then let previous
region for the control be the
region representing the control given by the control
member's value for this scratch bitmap,
if any. If the control
member is null or no such region currently exists, let previous
region for the control be null.
If there is a previous region with this control, remove it from the scratch bitmap's hit region list .
If there is a previous region with this ID, remove it from the scratch bitmap's hit region list .
Clear regions that cover the pixels in region's set of pixels on this scratch bitmap.
Add region to the scratch bitmap's element's hit region list.
When the removeHitRegion()
method is invoked, the user agent must run the following steps:
Let region be the region identified by the ID given by the method's argument in the rendering context's scratch bitmap. If no such region currently exists, abort these steps.
If the method's argument is the empty string, then no region will match.
Remove region from the rendering context's scratch bitmap's hit region list .
Garbage-collect the regions of the rendering context's scratch bitmap.
The MouseEvent
interface is extended to support hit
regions:
partial interface MouseEvent { readonly attribute DOMString? region; }; partial dictionary MouseEventInit { DOMString? region; };
region
If the mouse was over a hit region, then this returns the hit region's ID, if it has one.
Otherwise, returns null.
The region
attribute on MouseEvent
objects must return the value it
was initialized to. When the object is created, this attribute must be
initialized to null. It represents the hit
region's ID if the mouse was over a hit region when the event was
fired.
When a MouseEvent
is to be fired at a canvas
element by the user agent in response to a pointing device action, if
the canvas
element has a hit
region list, the user agent must instead follow these steps. If
these steps say to act as normal, that means that the event must
be fired as it would have had these requirements not been applied.
If the pointing device is not indicating a pixel on the canvas
,
act as normal and abort these steps.
Let pixel be the pixel indicated by the pointing device.
Let region be the hit
region that is the region for the pixel
pixel on this canvas
element's bitmap, if any.
If there is no region, then act as normal and abort these steps.
Let id be the region's ID, if any.
If there is an id, then initialize
the event object's region
attribute to id.
Let control be the control represented by
region for this canvas
element, if any.
If there is a control, then target
the event object at control instead
of the canvas
element.
Continue dispatching the event, but with the updated event object and target as given in the above steps.
When a user's pointing device cursor is positioned over a canvas
element, user agents should render the pointing device cursor according
to the cursor specification described by the cursor for the hit region
that is the
region for the pixel that the pointing device designates on the canvas
element's bitmap.
User agents are encouraged to make use of the information present in a
canvas
element's hit region
list to improve the accessibility of canvas
elements.
Each hit region should be handled in a
fashion equivalent to a node in a virtual DOM tree rooted at the canvas
element. The hierarchy of this virtual DOM tree must match the hierarchy
of the hit regions,
as described by the parent
of each region. Regions without a parent must be treated as
children of the canvas
element for the purpose of this
virtual DOM tree. For each node in such a DOM tree, the hit
region's bounding circumference gives the region of the screen to
use when representing the node (if appropriate).
The semantics of a hit region for the purposes of this virtual DOM tree are those of the the control represented by the region, if it has one .
For the purposes of accessibility tools, when an element C
is a descendant of a canvas
element and there is a region representing the
control C for that canvas
element's bitmap, then the element's position relative to the document
should be presented as if it was that region in the canvas
element's virtual DOM tree.
The semantics of a hit region for the purposes of this virtual DOM tree are those of the the control represented by the region, if it has one, or else of a non-interactive element whose ARIA role, if any, is that given by the hit region's ARIA role, and whose textual representation, if any, is given by the hit region's label.
Thus, for instance, a user agent on a touch-screen device
could provide haptic feedback when the user croses over a hit
region's bounding circumference, and then read the hit
region's label 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 canvas
element is focused,
if the control has a corresponding region, then that hit
region's bounding circumference could be used to determine what
area of the display to magnify.