javascriptgoogle-chromecanvashtml5-canvasbrowser-support

Are canvas hit regions still available in Google Chrome?


We were using the experimental Hit Region feature in our web application for accessibility reasons. We've just found out that this feature is no longer working in Google Chrome. I can't find anything about it on official sites.

Here is a simple demo of the "Hit Region" feature:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

// head
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();

try
{
  ctx.addHitRegion({id: "eyes"}); // NO SUPPORT => Exception

  // mouth :-)
  ctx.beginPath();
  ctx.arc(100, 110, 50, 0, Math.PI, false);
  ctx.stroke();
}
catch
{
  // mouth :-(
  ctx.beginPath();
  ctx.arc(100, 160, 40, Math.PI, 0, false);
  ctx.stroke();
}

canvas.addEventListener('mousemove', function(event) {
  if (event.region) {
    alert('hit region: ' + event.region);
  }
});
<canvas id="canvas"></canvas>

Running the code snippet above:

The demo is working in Firefox 61.0.1, but is not working in Google Chrome 67.0.3396.99 and I can no longer find the according flag under chrome://flags/ to enable it. Does anybody know if this features was removed?


Solution

  • The "Experimental Canvas Features" flag has been removed from Chrome in the latest Canary (CL). To play around with experimental canvas features, you could turn on the "Experimental Web Platform features" flag.
    (source)

    This is the new flag you're looking for:

    enter image description here

    If you enable that flag, your snippet will render a happy smiley.