前出のプログラムはキーを押してから，少し間があります．
この原因は，10ミリセカンド毎に実行しているfunction draw()の外に，キー入力処理のプログラムがあるからです．
そこで，必ず10ミリセカンド毎に実行されるfunctiondraw()の中にキー関係を入れて，，みたいのですがうまく入りません．
そこで，ON/OFFができるブーリアンを使います．
これで10ミリセカンド毎に，矩形の移動をON/OFFできます．
サンプル
<!DOCTYPE html>
<html>
<head>
<title>Key2</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var migi = false;
var myX = 0;
var myY = 0;
var sokudo = 5;
var aBool = false;
var bBool = false;
var cBool = false;
var dBool = false;
function kyesage(myEvt) {
if (myEvt.keyCode == 39){
aBool = true;
}
if (myEvt.keyCode == 40){
bBool = true;
}
if (myEvt.keyCode == 38){
cBool = true;
}
if (myEvt.keyCode == 37){
dBool = true;
}
}
function kyeageta(myEvt) {
if (myEvt.keyCode == 39){
aBool = false;
}
if (myEvt.keyCode == 40){
bBool = false;
}
if (myEvt.keyCode == 38){
cBool = false;
}
if (myEvt.keyCode == 37){
dBool = false;
}
}
document.onkeydown = kyesage;
document.onkeyup = kyeageta;
function draw() {
context.clearRect(myX, myY, 20, 20);
if(aBool == true){
myX = myX + sokudo;
}
if(bBool == true){
myY = myY + sokudo;
}
if(cBool == true){
myY = myY - sokudo;
}
if(dBool == true){
myX = myX - sokudo;
}
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
</script>
</body>
</html>
どうでしょうか？思い通りに反応しましたか？