JavaScript "keydown" detektor zdarzeń nie działa

Question

Zdarzenie mousemove działa i wywołujeMouseMove za każdym razem, gdy poruszam się po płótnie. Mimo że zdarzenia keydown i keyup nigdy nie działają. Klikam na płótno i uderzam w klawisze, ale żadne zdarzenie nie jest wyzwalane. Czy ktoś wie, dlaczego te wydarzenia nie działają? Dziękuję za radę! Podążam za kursem html5 z udacity, jeśli ktoś jest ciekawy skąd pochodzi kod.

InputEngineClass = Class.extend({ 

keyState: new Array(), 

setup: function() { 
    document.getElementById("gameCanvas").addEventListener('mousemove', gInputEngine.onMouseMove); 
    document.getElementById("gameCanvas").addEventListener('keydown', gInputEngine.onKeyDown); 
    document.getElementById("gameCanvas").addEventListener('keyup', gInputEngine.onKeyUp); 
}, 

onMouseMove: function (event) { 
    console.log("Called onMouseMove"); 
    var posx = event.clientX; 
    var posy = event.clientY; 
}, 

onKeyDown: function (event) { 
    console.log("KEY DOWN!!!"); 
    keyState[event.keyID] = true; 
    gInputEngine.update(); 
}, 

onKeyUp: function (event) { 
    console.log("KEY UP!!!"); 
    keyState[event.keyID] = true; 
}, 

update: function() { 
    KeyW = 87; 

    if(gInputEngine.keyState[KeyW]) console.log("FORWARD!!!"); 
} 
}); 

gInputEngine = new InputEngineClass(); 

Answer 1

Zmieniam mój komentarz w odpowiedź, dzięki czemu możesz zakończyć to pytanie.

Aby obiekt DOM mógł odbierać zdarzenia na klawiaturze, musi najpierw uzyskać ustawienie klawiatury na stronie. Tylko wtedy zdarzenia klawiatury będą kierowane do tego obiektu. Najprostszym sposobem na zrobienie tego dla obiektu canvas jest nadanie mu atrybutu tabIndex.

canvas.setAttribute("tabindex", 0); 

Można zobaczyć cudzego podsumowanie tego problemu tutaj: http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html