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
.