This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The CanvasRenderingContext2D
.addHitRegion()
method of the Canvas 2D API adds a hit region to the bitmap. This allows you to make hit detection easier, lets you route events to DOM elements, and makes it possible for users to explore the canvas without seeing it.
void ctx.addHitRegion(options);
The options
argument is optional. When provided, it is an Object
which can contain the following properties:
path
Path2D
object describing the area of the hit region. If not provided, the current path is used.fillRule
nonzero
").id
parentID
cursor
cursor
to use when the mouse is over this region (defaults to "inherit
"). Inherits the cursor of the parent hit region, if any, or the canvas element's cursor.control
null
.label
null
.role
null
.addHitRegion
methodThis is just a simple code snippet which uses the addHitRegion
method.
<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.addEventListener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginPath(); ctx.arc(100, 100, 75, 0, 2 * Math.PI, false); ctx.lineWidth = 5; ctx.stroke(); // eyes ctx.beginPath(); ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); ctx.arc(130, 80, 10, 0, 2 * Math.PI, false); ctx.fill(); ctx.addHitRegion({id: "eyes"}); // mouth ctx.beginPath(); ctx.arc(100, 110, 50, 0, Math.PI, false); ctx.stroke();
Edit the code below and see your changes update live in the canvas (if you don't see the full smiley, check in the browser compatibility table, if your current browser supports hit regions already, you might need to activate a preference).
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'CanvasRenderingContext2D.addHitRegion' in that specification. | Living Standard | Initial definition. |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes)[1] | 30 (30) [2] | No support | No support | No support |
id | (Yes)[1] | 30 (30) [2] | No support | No support | No support |
control | (Yes)[1] | 30 (30) [2] | No support | No support | No support |
path | (Yes)[1] | 39 (39) [2] | No support | No support | No support |
fillRule | (Yes)[1] | No support | No support | No support | No support |
other hit region options | No support | No support | No support | No support | No support |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | 30.0 (30) | No support | No support | No support |
id | No support | No support | 30.0 (30) | No support | No support | No support |
control | No support | No support | 30.0 (30) | No support | No support | No support |
path | No support | No support | 39.0 (39) | No support | No support | No support |
fillRule | No support | No support | No support | No support | No support | No support |
other hit region options | No support | No support | No support | No support | No support | No support |
[1] This feature is behind a feature flag. Set the flag ExperimentalCanvasFeatures
to true
to enable it.
[2] This feature is behind a feature preference setting. In about:config, set canvas.hitregions.enabled
to true
.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion