If you are developing a game that will run inside of a frame or iframe (such as a Facebook app), then you might want to focus the canvas so that keyboard input is captured by your game.  Otherwise your player needs to click around to put the focus on the app, and that's no good.

I first fixed this by hacking gbox.js to set the canvas' tabindex attribute to 1.

This hack was made inside initScreen:

this._screen = document.createElement("canvas");
if (this._border) this._screen.style.border = "1px solid black";
this._screen.setAttribute('height', h);
this._screen.setAttribute('width', w);
this._screen.setAttribute('tabindex', 1); // <-- this is the line I added.
this._screen.style.width = (w * this._zoom) + "px";
this._screen.style.height = (h * this._zoom) + "px";
this._screenh = h;
this._screenw = w;

But, I forgot that I hacked this code, and when I upgraded Akihabara from 1.2.1 to 1.3, the hack was blown out.

So instead of hacking a third party file again, I can do the same using jQuery in my game's code:

$('canvas').attr('tabindex', '1');


This is better because I don't have to worry about new releases of Akihabara overwriting my mod. :)

Maybe this tabindex can be set inside the engine in the future.

Works great in Firefox.  Also works in Chrome, but that browser decided to color the "focus ring" around the canvas a Halloween orange color.  So that will be my next fix when I come back to it.

So:

1) Don't hack code that you can't control!

2) Use jQuery to shim your code!

3) Akihabara RULES!

Akihabara can be found at http://www.kesiev.com/akihabara/