javascriptでテトリミノを動かしたい

テトリミノを動かしたいのですが、座標位置を変更しても動きがありません。
座標にtetro_x=3;と初期値を入れてやると、横方向に移動します。
しかし、キー操作で加算してやっても、ミノに動きがありません。
console.logでtetro_xを出力していますが、数値は増えています。

環境はfirefoxです。
アドバイスお願いします。

javascript
1const block_size = 30;
2const tetro_size = 4;
3let can = document.getElementById("can");
4let con = can.getContext("2d");
5
6
7
8//テトロミノの座標
9let tetro_x = 0;
10let tetro_y = 0;
11
12
13for(let x = 0; x<1;x++){
14        con.fillStyle = "red";
15        con.fillRect ((tetro_x + x) * block_size, 0,  block_size,block_size) ;
16        con.strokeStyle = "black";
17         con.strokeRect((tetro_x + x) * block_size,0,block_size,block_size); 
18}
19
20
21
22document.onkeydown = function(ev){
23   if(ev.keyCode==39){
24       tetro_x++;//右
25      console.log(tetro_x);
26
27   }
28}

html
1<!DOCTYPE html>
2<head>
3<style><!--
4body{background-color:gray};
5--></style>
6
7</head>
8<html>
9  <body>
10     <h1>サンプル</h1>
11  <canvas id ="can"></canvas>
12  </body>
13    <script type="text/javascript" src="samplejs.js"></script>
14
15
16</html>

行動規範の内容に同意します

回答1件

座標値を変更したあと、描画処理を実行しないと画面更新されませんよ。
とりあえずこうすれば動きますけど、画面クリアしてないのでどんどん増えてきます。

javascript
1let con = can.getContext("2d");
2
3//テトロミノの座標
4let tetro_x = 0;
5let tetro_y = 0;
6
7function update () {
8  for(let x = 0; x<1; x++) {
9    con.fillStyle = "red";
10    con.fillRect((tetro_x + x) * block_size, 0, block_size,block_size);
11    con.strokeStyle = "black";
12    con.strokeRect((tetro_x + x) * block_size, 0, block_size,block_size);
13  }
14}
15
16update();
17
18document.onkeydown = function (ev) {
19   print(ev.keyCode);
20   if(ev.keyCode == 39){
21      tetro_x++;//右
22      console.log(tetro_x);
23      update();
24   }
25}