Exploring how to use canvas

tetris.js

@@ -46,10 +46,9 @@ let tetris = function () {
     ];
 
     let timer, canvas, ctx, bs;
-    let score, speed;
     let next_t;
     
-    let board=Array.from(Array(grid_x), () => new Array(grid_y));
+    let board;
     let t = {t:null,x:0,y:0,r:0};
 
 
@@ -112,7 +111,7 @@ let tetris = function () {
     function glue(p) {
         p.t.r[p.r].forEach(b => { board[p.x+b[0]][p.y+b[1]]=1; } );
         draw(t);
-        setShape(t);
+        dropShape(t);
     }
 
     function collision(p) {
@@ -121,26 +120,27 @@ let tetris = function () {
         return false
     }
 
-    function setShape(p) {
+    function getNextT() {
         let tNum = Math.floor(Math.random() * tetrimonios.length);
-        if ( !next_t ) {
-            next_t = tetrimonios[ tNum ];
-            setShape(p);
-        }
+        return tetrimonios[ tNum ];
+    }
 
+    function dropShape(p) {
         p.t = next_t;
         p.x = 0;
         p.y = grid_x/2 - 1;
         p.r = 0;
         
-        next_t = tetrimonios[ tNum ];
+        next_t = getNextT();
     }
 
     function newGame() {
-        score = 0;
-        speed = 1;
-        next_t = null;
-        setShape( t );
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(0,0,canvas.getBoundingClientRect().width,canvas.getBoundingClientRect().height);
+
+        board = Array.from(Array(grid_x), () => new Array(grid_y));
+        next_t = getNextT();
+        dropShape( t );
         if (!timer) timer = setInterval(()=>moveDown(t), 1000);
     }