addEventListener for keydown on Canvas

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?

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

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

encapsulate all of your js code within a window.onload function. I had a similar issue. Everything is loaded asynchronously in javascript so some parts load quicker than others, including your browser. Putting all of your code inside the onload function will ensure everything your code will need from the browser will be ready to use before attempting to execute.

Sometimes just setting canvas's tabindex to '1' (or '0') works. But sometimes - it doesn't, for some strange reason.

In my case (ReactJS app, dynamic canvas el creation and mount) I need to call canvasEl.focus() to fix it. Maybe this is somehow related to React (my old app based on KnockoutJS works without '..focus()' )