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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes1 ?302 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No No ?302 No No ?

1. This feature is behind the Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.

2. From version 30: this feature is behind the canvas.hitregions.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

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