What's the best way to create key events in HTML5 canvas?

Question

Please suggest the best way to create key events for HTML5 canvas. I don't prefer any library, but if you think that it's the best way then go answer it. Thanks in advance!

Answer 1

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
    }
}

Answer 2

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 .

Answer 3

I'm writing a Canvas game, and I use the default .addEventListener and shift through the event.keyCode s that come with it. Further, I don't listen for key events on the Canvas element its self, rather just set the listener to the window.

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false); 

Answer 4

Usage of class:

var CONTROL = MOBILE_CONTROL();

Look at this class:

function MOBILE_CONTROL (){

      this.X =  null;
      this.Y =  null;
      this.LAST_X_POSITION = null;
      this.LAST_Y_POSITION = null;
      this.MULTI_TOUCH = 'NO';
      this.MULTI_TOUCH_X1 = null;  
      this.MULTI_TOUCH_X2 = null;
      this.MULTI_TOUCH_X3 = null;
      this.MULTI_TOUCH_X4 = null;
      this.MULTI_TOUCH_X5 = null;
      this.MULTI_TOUCH_Y1 = null;
      this.MULTI_TOUCH_Y2 = null;
      this.MULTI_TOUCH_Y3 = null;
      this.MULTI_TOUCH_Y4 = null;
      this.MULTI_TOUCH_Y5 = null;
      this.MULTI_TOUCH_X6 = null;  
      this.MULTI_TOUCH_X7 = null;
      this.MULTI_TOUCH_X8 = null;
      this.MULTI_TOUCH_X9 = null;
      this.MULTI_TOUCH_X10 = null;
      this.MULTI_TOUCH_Y6 = null;
      this.MULTI_TOUCH_Y7 = null;
      this.MULTI_TOUCH_Y8 = null;
      this.MULTI_TOUCH_Y9 = null;
      this.MULTI_TOUCH_Y10 = null;
      this.MULTI_TOUCH_INDEX = 1;
      this.SCREEN = [window.innerWidth , window.innerHeight]; 
      this.SCREEN.W = this.SCREEN[0];
      this.SCREEN.H = this.SCREEN[1];
      //Application general
      this.AUTOR = "Nikola Lukic";
      this.APPLICATION_NAME = "mobile multi touch , system plugin for visual js .";


    }

    var CONTROL = new MOBILE_CONTROL();


    document.addEventListener('touchstart', function(event) 
    { 

    if (CONTROL.MULTI_TOUCH == 'NO') {
        var touch = event.touches[0];
        CONTROL.X = touch.pageX;
        CONTROL.Y = touch.pageY;
        console.log('TOUCH START AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );

    }
    else if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(CONTROL.MULTI_TOUCH_INDEX)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
      CONTROL.MULTI_TOUCH_INDEX = CONTROL.MULTI_TOUCH_INDEX + 1;


      }
    }
    CONTROL.MULTI_TOUCH = 'YES';

    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener('touchmove', function(event) 
    { 
    var touch = event.touches[0];
    CONTROL.X = touch.pageX;
    CONTROL.Y = touch.pageY;
    console.log('TOUCH MOVE AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    //#############
     if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(i)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
    }}
    //#############
    event.preventDefault();
    },false);
    //////////////////////////////////////////////////////// 
    document.addEventListener('touchend', function(event) 
    { 
    CONTROL.LAST_X_POSITION = CONTROL.X;  
    CONTROL.LAST_Y_POSITION = CONTROL.Y; 
    CONTROL.MULTI_TOUCH = 'NO';
    CONTROL.MULTI_TOUCH_INDEX = 1;
    CONTROL.MULTI_TOUCH_X1 = null;
    CONTROL.MULTI_TOUCH_X2 = null;
    CONTROL.MULTI_TOUCH_X3 = null;
    CONTROL.MULTI_TOUCH_X4 = null;
    CONTROL.MULTI_TOUCH_X5 = null;
    CONTROL.MULTI_TOUCH_X6 = null;
    CONTROL.MULTI_TOUCH_X7 = null;
    CONTROL.MULTI_TOUCH_X8 = null;
    CONTROL.MULTI_TOUCH_X9 = null;
    CONTROL.MULTI_TOUCH_X10 = null;
    CONTROL.MULTI_TOUCH_Y1 = null;
    CONTROL.MULTI_TOUCH_Y2 = null;
    CONTROL.MULTI_TOUCH_Y3 = null;
    CONTROL.MULTI_TOUCH_Y4 = null;
    CONTROL.MULTI_TOUCH_Y5 = null;
    CONTROL.MULTI_TOUCH_Y6 = null;
    CONTROL.MULTI_TOUCH_Y7 = null;
    CONTROL.MULTI_TOUCH_Y8 = null;
    CONTROL.MULTI_TOUCH_Y9 = null;
    CONTROL.MULTI_TOUCH_Y10 = null;
    console.log('LAST TOUCH POSITION AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener("touchcancel", function(event) 
    { 
    console.log('BREAK - LAST TOUCH POSITION AT:(X' + CONTROL.X + '(,(' + CONTROL.Y + ')' );
    }, false);
    ////////////////////////////////////////////////////////