次のHTMLを全てコピペして key2.html という名前などで保存してください．
<!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;
function kyesage(myEvt) {
if (myEvt.keyCode == 39)
//migi = true;
//context.clearRect(myX, myY, 20, 20);
myX = myX + 1;
myY = myY + 1;
console.log(migi);
}
document.onkeydown = kyesage;
function draw() {
context.fillStyle = "#FF0000";//赤
context.fillRect(myX, myY, 20, 20);
}
setInterval(draw, 10);
</script>
</body>
</html>
ブラウザで読み込み，右キーを押してみましょう
図形が動きましたか？
このプログラムは図形の開始位置(myX, myY）を最初に変数宣言して（0, 0）を代入しています．そして，キーを押し下げる(onkeydown)と，keysageを実行しますが，そのときにmyX,myYの値に１を足します．（なんか1足すのをインクリメントって言うらしい）それで移動したように見えます．
え？移動じゃない？
そうですね．移動後に書き足して，移動前の四角形は消していません．
ここで問題です
次の命令で描いた矩形を消すことができます．
context.clearRect(myX, myY, 20, 20);
では何行目に入れれば下図のように，綺麗に移動したように見えるでしょうか？
描画している順序を見て考えてみてください．
余談ですが，この「消す」という命令．ゲームでは
弾が当たる＞キャラクタを消す＞爆発のパーティクルを発生させる
という流れで利用したりします．（destroy, disableなどです）
余裕のある方は，
（１）移動速度を代えるにはどうすればよいか
（２）（１）が分かった方は何カ所も変更するのが面倒だと気づいたかと思います．では移動速度の変数を１つ用意して，その1カ所書き換えるだけで，全部変更するにはどうすればよいか考えてみてください