Canvas drawing movement on keydown

Question

HTML:

<canvas id="mycanvas"></canvas>

CSS:

canvas {border: 1px solid black}

JS:

window.addEventListener('load', function(){

  //constants
  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 300;
  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  //dimensions of the rectangle
  var x = 100;
  var y = 100;
  var w = 5;
  var h = 5;
  var speed = 10;   

  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200, 0, 100)";
  ctx.fillRect(x, y, w, h);

  //key array
  var keys = []; 
  onkeydown = onkeyup = function(e){
      keys[e.keyCode] = e.type == 'keydown';
      if(keys[68] || keys[65] || keys[83] || keys[87]){
          step();
      }
  }      

  //update the rectangle position
  var updateX = function() {
    if(keys[65]){
      x = x - speed; 
    }      
    else {
      x = x + speed;        
    }
  };
  var updateY = function() {
    if(keys[87]){
      y = y - speed;
    }
    else{      
      y = y +  speed;
    }
  };        

  //show it on the screen
  var draw = function() {
    ctx.clearRect(0,0,500,300);
    ctx.fillStyle = "rgb(200, 0, 100)";
    ctx.fillRect(x, y, w, h);
  };

  //gets executed multiple times per second
  var step = function() {

    if(keys[68] || keys[65]){
      updateX();
      if(x >= (CANVAS_WIDTH - 6)){
        x=(CANVAS_WIDTH - 6);
      }
      else if(x <= 0){
        x=0;
      }
    }
    else if(keys[83] || keys[87]){
      updateY();
      if(y >= (CANVAS_HEIGHT - 6)){
        y=(CANVAS_HEIGHT - 6);
      }      
      else if(y <= 0){
        y=0;
      }
    }    
    draw();

  };  

});

Here is the project: https://jsfiddle.net/hxpkrbxt/3/

This is a simple learning project of mine that lets the user move a 5x5 pixels element with the A/S/D/W keys. There are a couple of things that I don't understand and I would be thankful if someone could explain them to me:

1. When you press one of the keys, the square moves once in the direction you wanted and if you keep pressing the key, after a bit the square moves continuously in that direction. Why is that short pause occurring ?

2. I want to make it possible for the square to move diagonally, but it turns out it is not as straight forward as the for basic directions, and I can't figure out how to fire both functions simultaneously (updateX and updateY) when two of the buttons are pressed.

UPDATE:

After the help of the guys below this is the final version of what I wanted to create: http://jsfiddle.net/41etss7k/1/

Answer 1

You can use a buffer to save your type press. Movement is really smooth in this way

https://jsfiddle.net/hxpkrbxt/9/

                    //constants
  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 300;
  var canvas = document.getElementsByTagName('canvas')[0];
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  //dimensions of the rectangle
  var x = 100;
  var y = 100;
  var w = 5;
  var h = 5;
  var speed = 5;   

  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200, 0, 100)";
  ctx.fillRect(x, y, w, h);

  //key array
  var keys = [];
  var currentPressed = {'x':0,'y':0}
  var activeKey = {}
  onkeydown = function(e){
      if(activeKey[e.keyCode]){
          return;
                   }
      activeKey[e.keyCode]=true;
  } 
  onkeyup = function(e){
      activeKey[e.keyCode]=false;
  } 

  //show it on the screen
  var draw = function() {
    ctx.clearRect(0,0,500,300);
    ctx.fillStyle = "rgb(200, 0, 100)";
    ctx.fillRect(x, y, w, h);
  };

  //gets executed multiple times per second
  var step = function() {
      currentPressed.x=currentPressed.y=0;
      currentPressed.x -= (activeKey[65])?1:0;
      currentPressed.y -= (activeKey[87])?1:0;
      currentPressed.x += (activeKey[68])?1:0;
      currentPressed.y += (activeKey[83])?1:0;

      x += Math.sign(currentPressed.x) * speed;
    y += Math.sign(currentPressed.y) * speed;
      if(x >= (CANVAS_WIDTH - 6)){
        x=(CANVAS_WIDTH - 6);
      }
      else if(x <= 0){
        x=0;
      }
      if(y >= (CANVAS_HEIGHT - 6)){
        y=(CANVAS_HEIGHT - 6);
      }      
      else if(y <= 0){
        y=0;
      }
    draw();
    requestAnimationFrame(step);
  };  

requestAnimationFrame(step);

in this way you have a separation key <-> movement with a setInterval

Answer 2

1. Works fine for me, must be your keyboard settings

2. You're specifically telling it to move only in one direction:

   else if(keys[83] || keys[87]){
   

Change that to:

if(keys[83] || keys[87]){

https://jsfiddle.net/hxpkrbxt/5/

Answer 3

1. The pause is from the operating system I think, the same happens it you just press and hold a key when typing into notepad.

2. Change else if to just if.

   var step = function() {

       if(keys[68] || keys[65]){
         updateX();
         if(x >= (CANVAS_WIDTH - 6)){
           x=(CANVAS_WIDTH - 6);
         }
         else if(x <= 0){
           x=0;
         }
       }
       if(keys[83] || keys[87]){
         updateY();
         if(y >= (CANVAS_HEIGHT - 6)){
           y=(CANVAS_HEIGHT - 6);
         }      
         else if(y <= 0){
           y=0;
         }
       }    
       draw();
   
     };