The MouseEvent.region read-only property returns the id of the canvas hit region affected by the event. If no hit region is affected, null is returned.


var hitRegion = instanceOfMouseEvent.region

Return value

A DOMString representing the id of the hit region.


<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.addHitRegion({id: "circle"});

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    console.log("hit region: " + event.region);


Specification Status Comment
HTML Living Standard
The definition of 'MouseEvent.region' in that specification.
Living Standard Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)[1] 30 (30)[2] 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

[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.

See also

Document Tags and Contributors

 Contributors to this page: Sebastianz, teoli, fscholz
 Last updated by: Sebastianz,