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?
This question is related to
javascript
html
canvas
html5-canvas
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()' )
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
Source: Stackoverflow.com