I am writing a simple page with JQuery and HTML5 canvas tags where I move a shape on the canvas by pressing 'w' for up, 's' for down, 'a' for left, and 'd' for right. I have it all working, but I would like the shape to start moving at a constant speed upon striking a key. Right now there is some kind of hold period and then the movement starts. How can I get the movement to occur immediately?

Here the important part of my code:
Your browser does not support the HTML5 canvas tag.

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");
  });
});

</script>

please let me know if I shouldn't be posting code this lengthy.