Uncaught TypeError: Невозможно прочитать свойство 'clearRect' из неопределенного

Question

В форуме есть несколько ошибок, но нет Canvas / clearRect.

Это просто ошибка синтаксиса, я все перепробовал и не знаю, как ее решить ... Ошибка обвиняет объект Ball, и я обучаю другой объект, равный этому, и он работает нормально.

Я рекомендую запустить этот код в вашем HTML, чтобы указать, где ошибка. Спасибо, кто помогает !!

Гугл переводчик

document.addEventListener("keydown", function(e) {
   switch (e.keyCode) {
      case 37:
         speedX = -9;
         left = true;
         right = false;
         sair == true;
         break;
         //esquerda

      case 39:
         speedX = 9;
         right = true;
         left = false;
         break;
         //direita
   }
});

document.addEventListener("keyup", function(e) {
   switch (e.keyCode) {
      case 37:
         speedX = 0;
         break;
      case 39:
         speedX = 0;
         break;
   }
});

var
   ctx,
   altura = 600,
   largura = 400,
   frames = 0,
   speedX = 0,
   left = false,
   right = false,
   //fim das variaveis
   limbo = {
      x: 0,
      xLargura: largura,
      y: 510,
      yAltura: altura,
      art: function() {
         ctx.fillStyle = "#87CEEB";
         ctx.fillRect(this.x, this.y, this.xLargura, this.yAltura);
      }
   };

/* ball = {
     x: 190,
     xLargura: 15,
     y: 200,
     yAltura: 15, 
     speedBall: 3,

     art: function() {
         ctx.fillStyle = "black";
         ctx.fillRect(this.x, this.y, this.xLargura, this.yAltura);            
     },

     limpar: function() {
         ctx.clearRect(this.x, this.y, this.xLargura, this.yAltura);
     }, 

     atualiza: function() {
         this.limpar();
         this.y += this.speedBall;
         this.x += this.speedBall;
         this.art();
     }
 }; */

board = {
   x: 150,
   y: 500,
   xLargura: 100,
   yAltura: 6,

   art: function() {
      ctx.fillStyle = "black";
      ctx.fillRect(this.x, this.y, this.xLargura, this.yAltura);
   },

   limpar: function() {
      ctx.clearRect(this.x, this.y, this.xLargura, this.yAltura);
   },

   atualiza: function() {
      if (left == true || right == true) {
         this.limpar();
         this.x += speedX;
         this.art();
      };

      if (this.x <= 0) {
         this.x = 0;
      }

      if (this.x + this.xLargura >= 400) {
         this.x = 300;
      }
   }
}
//fim dos objetos
function main() {
   roda();
}

function atualiza() {
   frames++;
   // ball.atualiza();
   board.atualiza();
}

function art() {
   var canvas = document.getElementById("game")
   ctx = canvas.getContext("2d");

   // ball.art();
   limbo.art();
   board.art();

   ctx.fillStyle = "red"
   ctx.fillRect(150, 0, 100, 5);
}

function limpar() {
   //  ball.limpar();            
   board.limpar();
}

function roda() {
   atualiza();
   art();
   window.requestAnimationFrame(roda);
}

main();