title: Class method is not a function inside requestAnimationFrame
body: <p>I'm coding my first pong game and I just wanted to make this Object Oriented. I started with my canvas code not in a class and that worked fine, the game was working. I decided to make it its own class as well, and everything still works until I call one of its methods inside my animate function <a href="https://i.stack.imgur.com/TQ4dz.png" rel="nofollow noreferrer">requestAnimationFrameError.png</a>. I have no clue as to why this is occuring.</p>
  <p>Here is the code:
  <a href="https://github.com/MapleeeSyruppp/Pong/blob/main/app.js" rel="nofollow noreferrer">https://github.com/MapleeeSyruppp/Pong/blob/main/app.js</a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// canvas class
  class Board{
      constructor(element){
          this.canvas = element
      }
  
      createContext(){
          console.log(`context set`)
          this.context = this.canvas.getContext('2d')
      }
      createSize(height, width){
          console.log('size set')
          this.canvas.height = height
          this.canvas.width = width
      }
  
      fillStyle(colour){
          this.context.fillStyle = colour
      }
      fillRect(x, y, width, height){
          console.log('rect set')
          this.context.fillRect(x, y, width, height)
      }
  }
  
  const el = document.getElementById("board")
  const gameBoard = new Board(el)
  gameBoard.createSize(500,500)
  gameBoard.createContext()
  
  class Paddle{
      constructor(pos){
          this.pos = pos
          this.velocity = {
              x: 0,
              y: 0
          }
          this.width = 10
          this.height = 60
      }
  
      draw(){
          gameBoard.fillStyle('white')
          gameBoard.fillRect(this.pos.x, this.pos.y, this.width, this.height)
      }
  
      checkOutOfBounds(){
          if(this.pos.y &lt;= 0){
              this.velocity.y = 0
          }
          else if(this.pos.y + 60 &gt;= gameBoard.height){
              this.velocity.y = 0
          }
      }
  
      update(){
          this.draw()
          this.pos.y += this.velocity.y
          this.checkOutOfBounds()
      }
  }
  class Ball{
      constructor(pos){
          this.pos = pos
          //Math.random() - 0.5 &gt;= 0 ? -(velocity) : (velocity)
          const direction = {
              x: Math.random() - 0.5 &gt;= 0 ? -0.8 : 0.8,
              y: Math.random() - 0.5 &gt;= 0 ? -1 : 1,
          }
          this.velocity = {
              x: direction.x,
              y: direction.y
          }
          this.width = 10
          this.height = 10
      }
  
      draw(){
          gameBoard.fillStyle = 'white'
          gameBoard.fillRect(this.pos.x, this.pos.y, this.width, this.height)
      }
  
      checkBoundaryCollision(){
          const rightSide = this.pos.x + this.width + this.velocity.x
          const leftSide = this.pos.x + this.velocity.x
          const topSide = this.pos.y + this.height + this.velocity.y
          const bottomSide = this.pos.y + this.velocity.y
          // Boundary collision
          // Top / Bot
          if(topSide &gt;= gameBoard.height || bottomSide &lt;= 0){
              this.velocity.y = -this.velocity.y
          }
          // Right / Left
          if(rightSide &gt;= gameBoard.width || leftSide &lt;= 0){
              this.velocity.x = -this.velocity.x
          }
      }
  
      checkPaddleCollision(){
          const p1 = {
              leftSide: paddle1.pos.x,
              rightSide: paddle1.pos.x + paddle1.width,
              topSide: paddle1.pos.y,
              bottomSide: paddle1.pos.y + paddle1.height
          }
          const p2 = {
              leftSide: paddle2.pos.x,
              rightSide: paddle2.pos.x + paddle2.width,
              topSide: paddle2.pos.y,
              bottomSide: paddle2.pos.y + paddle2.height
          }
          // Checks
          // Paddle 1 Check
          if(this.pos.x + this.velocity.x &lt;= p1.rightSide &amp;&amp; this.pos.y + this.velocity.y &gt;= p1.topSide &amp;&amp; this.pos.y + this.velocity.y &lt;= p1.bottomSide){
              this.velocity.x = -this.velocity.x
          }
          // Paddle 2 Check
          if(this.pos.x + this.width + this.velocity.x &gt;= p2.leftSide &amp;&amp; this.pos.y + this.velocity.y &gt;= p2.topSide &amp;&amp; this.pos.y + this. velocity.y &lt;= p2.bottomSide){
              this.velocity.x = -this.velocity.x
          }
      }
  
      update(){
          this.draw()
          // Boundary collision
          this.checkBoundaryCollision()
          // Paddle collision
          this.checkPaddleCollision()
          this.pos.x += this.velocity.x
          this.pos.y += this.velocity.y
      }
  }
  
  const paddle1 = new Paddle({x: 30, y: gameBoard.height / 2 - 30})
  const paddle2 = new Paddle({x: gameBoard.width - 30, y: gameBoard.height / 2 - 30})
  const ball = new Ball({x: gameBoard.width / 2 - 5, y: gameBoard.height / 2 - 5})
  
  // Draw
  function animate(){
      requestAnimationFrame(() =&gt; (animate()))
      gameBoard.fillStyle('black')
      gameBoard.fillRect(0, 0, gameBoard.width, gameBoard.height)
      paddle1.update()
      paddle2.update()
      ball.update()
  }
  animate()
  
  addEventListener('keydown',(ev)=&gt;{
      switch(ev.key){
          case 'w':
              // Go up
              paddle1.velocity.y = -1.5
              paddle1.update()
              break;
          case 's':
              // Go down
              paddle1.velocity.y = 1.5
              paddle1.update()
              break;
          case 'ArrowUp':
              // Go up
              paddle2.velocity.y = -1.5
              paddle2.update()
              break;
          case 'ArrowDown':
              // Go up
              paddle2.velocity.y = 1.5
              paddle2.update()
              break;
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      font-family: 'Courier New', Courier, monospace;
      text-align: center;
      color: #ffffff;
      background-color: #3f0d38;
  }
  h1{
      font-size: 65px;
  }
  #board{
      margin-top: 10%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;canvas id="board"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>