CanvasRenderingContext2D.drawFocusIfNeeded()

Canvas 2D APIのCanvasRenderingContext2D.drawFocusIfNeeded()メソッドは、パラメーターで与えられた要素がフォーカスした時に、現在のパスもしくは与えられたパスの周りにフォーカスリングを描画します。

構文

void ctx.drawFocusIfNeeded(element);
void ctx.drawFocusIfNeeded(path, element);

パラメーター

element
フォーカスしたかどうかをチェックする要素。
path
利用する Path2D パス。

drawFocusIfNeededメソッドを使う

これは、drawFocusIfNeededメソッドを使った簡単なコードです

HTML

<canvas id="canvas">
  <input id="button" type="range" min="1" max="12">
</canvas>

JavaScript

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

button.focus();

ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.drawFocusIfNeeded(button);

下のコードを編集すると、変更がリアルタイムにcanvasに反映されます:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas">
<input id="button" type="range" min="1" max="12">
</canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
button.focus();
ctx.beginPath();
ctx.rect(10, 10, 30, 30);
ctx.drawFocusIfNeeded(button);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var button = document.getElementById("button");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

仕様 策定状況 コメント
HTML Living Standard
CanvasRenderingContext2D.drawFocusIfNeeded の定義
現行の標準

ブラウザー実装状況

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!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) 29 (29)[1] 未サポート (有) (有)
Pathパラメーター (有) 未サポート 未サポート (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) 29.0 (29)[1] 未サポート (有) (有)
Pathパラメーター (有) (有) 未サポート 未サポート (有) (有)

注記

  • [1] Gecko 28 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3)ではこのメソッドは "drawSystemFocusRing" として実装されていましたが、Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) で名前が変更されました。
  • [1] Gecko 32 (Firefox 32 / Thunderbird 32 / SeaMonkey 2.29 / Firefox OS 2.0) より前では、このメソッドは設定を変更しないと有効にならず、有効にするには "canvas.focusring.enabled" を変更する必要がありました。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: fscholz, Taken
最終更新者: Taken,