What's the best way to create key events in HTML5 canvas?

This will return the key code:

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

If you would like a demonstration of different things being done based on key:

function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
    if (code == 38)
        alert("You pressed the Up arrow key");
    else
        alert("You pressed some other key I don't really care about.");
}

Or if you have a long list of keys you'll be using, do it in a switch case:

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}

If you want to set key event handling on the <canvas> itself (not the window or document), set a tabindex on the <canvas> element. Note that the canvas will need to be in focus on to catch key events.

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

This is how it is done on the Processing.js website.

If you don't want a border to appear when you click on the canvas, set its style to outline: none.