CanvasRenderingContext2D.addHitRegion()

廃止
この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

CanvasRenderingContext2DaddHitRegion() メソッドは、ビットマップにヒット領域を追加します。

Canvas のヒット領域で、ヒットの検出が簡単になります。これらによってイベントを DOM 要素にルートでき、ユーザーは canvas を見なくても操作できるようになります。

構文

void ctx.addHitRegion(options);

オプション

options 引数は任意です。設定する場合は、次のプロパティを含む Object を指定します。

path
ヒット領域をあらわす Path2D オブジェクト。指定されない場合は現在のパスが使われます。
fillRule
ある点がヒット領域の中か外かを判断するアルゴリズムです。
取りうる値は次の通りです。
id
ヒット領域を後で参照するための ID。 ID はイベントなどで使われます。
parentID
親ヒット領域の ID。 cursor の継承やアクセシビリティツールによるナビゲーションで利用されます。
cursor
この領域にマウスが重なったときに使う cursor (初期値は inherit)。親ヒット領域があればそこから継承し、なければ、 canvas 要素の cursor から継承します。
control
イベントがルートされる要素 (canvasの子孫)。初期値は null
label
control がない場合にヒット領域の説明として使われるテキストラベル (アクセシビリティツール向け)。初期値はnull
role
control がない場合にヒット領域の挙動を説明する ARIA ロール (アクセシビリティツール向け)。初期値は null

addHitRegion メソッドの使用

これは、 addHitRegion メソッドを使った簡単な例です。

HTML

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

JavaScript

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

canvas.addEventListener('mousemove', function(event) {
  if(event.region) {
    alert("痛っ、僕の目だよ");
  }
});

ctx.beginPath();
ctx.arc(100, 100, 75, 0, 2 * Math.PI);
ctx.lineWidth = 5;
ctx.stroke();

// 目
ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI);
ctx.arc(130, 80, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.addHitRegion({id: "eyes"});

// Mouth
ctx.beginPath();
ctx.arc(100, 110, 50, 0, Math.PI);
ctx.stroke();

下のコードを編集すると変更が即座に canvas に反映されます。 (もし、スマイリーが不完全な状態で表示されている場合には、現在のブラウザーがヒット領域に対応しているかどうかをブラウザー互換性表を確認してください。設定で有効化する必要があるかもしれません。)

仕様書

Canvas のヒット領域は、 WHATWG Living Standard から削除されていますが、将来の標準化についての議論は続いています。詳しくは https://github.com/whatwg/html/issues/3407 を参照してください。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
addHitRegion
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
control
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the canvas.hitregions.enabled preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the canvas.hitregions.enabled preference.
Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
fillRule
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
id
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
other hit region options
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
path
実験的非推奨非標準
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ≤79
無効
完全対応 ≤79
無効
無効 From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 完全対応 39
無効
完全対応 39
無効
無効 From version 39: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報