Question

I’m trying to attach an event handler to the keyDown event in a canvas element. Here is a simplified version of my code.

class CanvasFun{

  CanvasElement canvas;

  CanvasFun(this.canvas){
    print("Game is loading!");
    this.canvas.onKeyDown.listen(handleInput);
  }

  void handleInput(e)
  {
    //breakpoint is never hit
    print(e.keyCode);
  }
}

I’ve removed some of the drawing code. In my main function I simply query the canvas element and pass it to my CanvasFun constructor.

I’ve also tried doing it this way:

void main() {

  var canvas = query("#Game");

  canvas.onKeyDown.listen(handleInput);

  var canvasFun = new CanvasFun(canvas); 

}
void handleInput(e)
{
  print(e.keyCode);
}

Answer 1

The reason why the event is not firing is because the focus is on the document (or some other element like an input, for example). And in fact, canvas element even when focused does not fire an event. Some elements do, like input elements.

The solution is to listen to key down events from the document or window:

window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.