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に反映されます:

仕様

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

ブラウザー実装状況

BCD tables only load in the browser

関連情報