Canvas How to - Read Key code

Question

We would like to know how to read Key code.

Answer


<!--from w w  w . j  a v  a2s.c o m-->


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
canvas:focus {
  background: #eef;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    W,H,
    key = [];
canvas.tabIndex = 0;
canvas.width = W = 200;
canvas.height = H = 200;
ctx.font = 'bold 22px Courier New';
ctx.textBaseline = 'top';
ctx.textAlign = 'center';
document.body.appendChild(canvas);
canvas.focus();
document.body.onmouseover = function(){
    canvas.focus();
}
canvas.onkeydown = canvas.onkeyup = function(e){
    var e = e || event;
    key[e.keyCode] = e.type == 'keydown';
}; 
(function loop(){
    ctx.clearRect(0,0,W,H);
    var y = 0, l = key.length, i, t;
    for(i = 0; i < l; i ++){
        if(key[i]){
            t = i + ' (0x'+i.toString(16)+')';
            ctx.fillText(t,canvas.width/2,y);
            y += 22;
        }
    }
    setTimeout(loop,1000/24);
})();
}//]]>  
</script>
</head>
<body>
</body>
</html>

The code above is rendered as follows: