MouseEvent.region

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.

Syntax

var hitRegion = instanceOfMouseEvent.region

Return value

A DOMString representing the id of the hit region.

Example

Example of using the event.region combined with CanvasRenderingContext2D.addHitRegion() method.

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

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

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

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    console.log("hit region: " + event.region);
  }
});
</script>

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
regionChrome Full support Yes
Disabled
Full support Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Full support ≤79
Disabled
Full support ≤79
Disabled
Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference (needs to be set to true).
Firefox Full support 30
Disabled
Full support 30
Disabled
Disabled 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.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 30
Disabled
Full support 30
Disabled
Disabled 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.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support
Full support
No support
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

See also