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:
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"> 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; button.focus(); 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);
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.drawFocusIfNeeded' in that specification. |
Living Standard | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
drawFocusIfNeeded | Chrome Full support Yes | Edge Full support 14 | Firefox
Full support
32
| 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
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Path parameter | Chrome Full support Yes | Edge ? | 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
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
See also
- The interface defining this method:
CanvasRenderingContext2D