addEventListener for keydown on Canvas

Question

I am trying to make a canvas app that responds to keyboard and mouse input. I have this code:

canvas = document.getElementById('canvas'); canvas.addEventListener('mousedown', function(event) {     alert('mousedown');         }, false); canvas.addEventListener('keydown', function(event) {     alert('keydown');         }, false); 

The 'mousedown' alert comes up whenever I click the mouse, but the 'keydown' alert never comes up. The same code works fine on JS Bin: http://jsbin.com/uteha3/66/

Why isn't it working on my page? Does canvas not recognize keyboard input?

Answer 1

Set the tabindex of the canvas element to 1 or something like this

<canvas tabindex='1'></canvas> 

It's an old trick to make any element focusable

Answer 2

Edit - This answer is a solution, but a much simpler and proper approach would be setting the tabindex attribute on the canvas element (as suggested by hobberwickey).

You can't focus a canvas element. A simple work around this, would be to make your "own" focus.

var lastDownTarget, canvas; window.onload = function() {     canvas = document.getElementById('canvas');      document.addEventListener('mousedown', function(event) {         lastDownTarget = event.target;         alert('mousedown');     }, false);      document.addEventListener('keydown', function(event) {         if(lastDownTarget == canvas) {             alert('keydown');         }     }, false); } 

JSFIDDLE