CanvasRenderingContext2D.drawFocusIfNeeded()

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

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

element

フォーカスしたかどうかをチェックする要素。

path

利用する Path2D パス。

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

• CanvasRenderingContext2D インタフェースがこのメソッドを定義しています。