I'm using the HTML5 <canvas> element in Firefox 2.0.0.16 and in Safari 3.1.2, both on my iMac. (I've tried this in Firefox 3.0 on Windows as well, also to no avail.) The tag looks like this:

<td>
   <canvas id="display"
           width="500px"
           height="500px">
   </canvas>
</td>

I have a button to "activate" some functionality that interacts with the canvas. That button's onclick() event calls a function. In that function I have the following line:

document.getElementById("display").focus();

This does not work. Firebug reports no error. But the focus still remains where it was. I can click on the canvas or tab towards the canvas and focus will be lost from the other elements, but apparently never be gained on by the canvas (The canvas's onfocus() event never fires).

I find this odd. Is it that the canvas simply cannot get focus, or am I missing something here? Any insight would be appreciated.

Thank you.

I'm using the HTML5 <canvas> element in Firefox 2.0.0.16 and in Safari 3.1.2, both on my iMac. (I've tried this in Firefox 3.0 on Windows as well, also to no avail.) The tag looks like this:

<td>
   <canvas id="display"
           width="500px"
           height="500px">
   </canvas>
</td>

I have a button to "activate" some functionality that interacts with the canvas. That button's onclick() event calls a function. In that function I have the following line:

document.getElementById("display").focus();

This does not work. Firebug reports no error. But the focus still remains where it was. I can click on the canvas or tab towards the canvas and focus will be lost from the other elements, but apparently never be gained on by the canvas (The canvas's onfocus() event never fires).

I find this odd. Is it that the canvas simply cannot get focus, or am I missing something here? Any insight would be appreciated.

Thank you.

• javascript
• canvas
• focus

1 Answer 1

Give the canvas a tab index:

   <canvas id="display"
           width="500px"
           height="500px"
           tabindex="1">
   </canvas>