Web/API/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

Managing button focus

This example draws two buttons on a canvas. The drawFocusIfNeeded() method is used to draw a focus ring when appropriate.

HTML

<canvas id="canvas">
  <button id="button1">Continue</button>
  <button id="button2">Quit</button>
</canvas>

JavaScript

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

document.addEventListener('focus', redraw, true);
document.addEventListener('blur', redraw, true);
canvas.addEventListener('click', handleClick, false);
redraw();

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawButton(button1, 20, 20);
  drawButton(button2, 20, 80);
}

function handleClick(e) {
  // Calculate click coordinates
  const x = e.clientX - canvas.offsetLeft;
  const y = e.clientY - canvas.offsetTop;

  // Focus button1, if appropriate
  drawButton(button1, 20, 20);
  if (ctx.isPointInPath(x, y)) {
    button1.focus();
  }

  // Focus button2, if appropriate
  drawButton(button2, 20, 80);
  if (ctx.isPointInPath(x, y)) {
    button2.focus();
  }
}

function drawButton(el, x, y) {
  const active = document.activeElement === el;
  const width = 150;
  const height = 40;

  // Button background
  ctx.fillStyle = active ? 'pink' : 'lightgray';
  ctx.fillRect(x, y, width, height);

  // Button text
  ctx.font = '15px sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = active ? 'blue' : 'black';
  ctx.fillText(el.textContent, x + width / 2, y + height / 2);

  // Define clickable area
  ctx.beginPath();
  ctx.rect(x, y, width, height);

  // Draw focus ring, if appropriate
  ctx.drawFocusIfNeeded(el);
}

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`drawFocusIfNeeded`	Chrome Full support Yes	Edge Full support 14	Firefox Full support 32 Full support 32 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `canvas.focusring.enabled` preference. To change preferences in Firefox, visit about:config. Full support 28 Alternate Name' Alternate Name' Uses the non-standard name: `drawSystemFocusRing`	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 32 Full support 32 Full support 29 Disabled' Disabled' From version 29: this feature is behind the `canvas.focusring.enabled` preference. To change preferences in Firefox, visit about:config. Full support 28 Alternate Name' Alternate Name' Uses the non-standard name: `drawSystemFocusRing`	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`Path` parameter	Chrome Full support Yes	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android No support No	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.
Uses a non-standard name.': Uses a non-standard name.