W3cubDocs

CanvasRenderingContext2D.drawFocusIfNeeded

The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring around the current or given path, if the specified element is focused.

Syntax

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

Parameters

element: The element to check whether it is focused or not.
path: A Path2D path to use.

Examples

Using the `drawFocusIfNeeded` method

This is just a simple code snippet which uses the drawFocusIfNeeded() method.

HTML

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

JavaScript

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

button.focus();

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

Edit the code below to see your changes update live in the canvas:

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'CanvasRenderingContext2D.drawFocusIfNeeded' in that specification.	Living Standard	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	?	32 32 29 Disabled Disabled From version 29: this feature is behind the `canvas.focusring.enabled` preference. To change preferences in Firefox, visit about:config. 28 Uses the non-standard name: `drawSystemFocusRing`	No	Yes	Yes
`Path` parameter	Yes	?	No	No	Yes	Yes

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	?	32 32 29 Disabled Disabled From version 29: this feature is behind the `canvas.focusring.enabled` preference. To change preferences in Firefox, visit about:config. 28 Uses the non-standard name: `drawSystemFocusRing`	Yes	Yes	Yes
`Path` parameter	Yes	Yes	?	No	Yes	Yes	Yes