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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Set the tabindex of the canvas element to 1 or something like this   lt canvas tabindex  1  gt  lt  canvas gt    It s an old trick to make any element focusable

[javascript] addEventListener for keydown on Canvas

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to html5-canvas