Я пишу простую страницу с тегами холста JQuery и HTML5, где я перемещаю фигуру на холсте, нажимая «w» вверх, 's' для вниз, «а» слева и «д» за право. У меня все это работает, но я бы хотел, чтобы фигура начинала двигаться с постоянной скоростью при нажатии клавиши. Прямо сейчас есть некоторый период удержания, и затем начинается движение. Как я могу заставить движение произойти немедленно?

Вот важная часть моего кода:

    


Your browser does not support the HTML5 canvas tag.
<br><br>
start navigating

coords should pop up here


key should pop up here




var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//keypress movements
var xtriggered = 0;
var keys = {};
var north = -10;
var east = 10;
var flipednorth = 0;

$(document).ready(function(e){
  $("input").keydown(function(){
    keys[event.which] = true;
    if (event.which == 13) {
         event.preventDefault();
      }
    //press w for north
    if (event.which == 87) {
         north++;
         flipednorth--;
      }
    //press s for south
    if (event.which == 83) {
         north--;
         flipednorth++;
      }
    //press d for east
     if (event.which == 68) {
         east++;
      }
    //press a for west
    if (event.which == 65) {
         east--;
      }
     var  msg = 'x: ' + flipednorth*5 + ' y: ' + east*5;
     ctx.beginPath();
     ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI);
     ctx.stroke();
     $('#soul2').html(msg);
    $('#soul3').html(event.which );
     $("input").css("background-color","#FFFFCC");
  });

  $("input").keyup(function(){
    delete keys[event.which];
    $("input").css("background-color","#D6D6FF");
  });
});

пожалуйста, дайте мне знать, если я не долженне публиковать код это долго.