javascript: pong game won't bounce off the bottom screen

Question

im creating a pong game and i got to the point where the ball bounces off three of the walls, but when i attempted to make it bounce off the bottom wall it just goes past it and then like 5 seconds later it comes back

<canvas id="pg" width = "800" height = "600">
  <script>
    var c;
    var cc;
    var ballx = 50;
    var ballY = 50;
    var ballSpeedX = 1.5;
    var ballSpeedY = 4;

    window.onload = function(){
      c = document.getElementById("pg");
      cc = c.getContext("2d");

      var fps = 180;
      setInterval(function(){
        move();
        draw();
      },1000/fps)
    }

    function move(){
      ballx += ballSpeedX
      if(ballx < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if(ballx > c.width) {
        ballSpeedX = -ballSpeedX;
      }
      ballY += ballSpeedY
      if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
      }
      if(ballx > c.height) {
        ballSpeedY = -ballSpeedY;
      }

    }
    function draw(){
      colorRect(0,0,c.width,c.height,"black");
      colorRect(10,210,5,100,"white");
      colorCircle(ballx,ballY,10,"white")

    }
    function colorCircle(centerX, centerY, radius, drawColor){
      cc.fillStyle = drawColor
      cc.beginPath();
      cc.arc(centerX, centerY,5,0,Math.PI*2,true);
      cc.fill();
    }
    function colorRect(leftX,topY,width,height,drawColor){
      cc.fillStyle = drawColor;
      cc.fillRect(leftX,topY,width,height);
    }
  </script>
</canvas>

Answer 1

You have a small typo in your move function:

// The last if should check if ballY > c.height instead
if(ballx > c.height) {
    ballSpeedY = -ballSpeedY;
}

<canvas id="pg" width = "800" height = "600">
  <script>
    var c;
    var cc;
    var ballx = 50;
    var ballY = 50;
    var ballSpeedX = 1.5;
    var ballSpeedY = 4;

    window.onload = function(){
      c = document.getElementById("pg");
      cc = c.getContext("2d");

      var fps = 180;
      setInterval(function(){
        move();
        draw();
      },1000/fps)
    }

    function move(){
      ballx += ballSpeedX
      if(ballx < 0) {
        ballSpeedX = -ballSpeedX;
      }
      if(ballx > c.width) {
        ballSpeedX = -ballSpeedX;
      }
      ballY += ballSpeedY
      if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
      }
      if(ballY > c.height) {
        ballSpeedY = -ballSpeedY;
      }

    }
    function draw(){
      colorRect(0,0,c.width,c.height,"black");
      colorRect(10,210,5,100,"white");
      colorCircle(ballx,ballY,10,"white")

    }
    function colorCircle(centerX, centerY, radius, drawColor){
      cc.fillStyle = drawColor
      cc.beginPath();
      cc.arc(centerX, centerY,5,0,Math.PI*2,true);
      cc.fill();
    }
    function colorRect(leftX,topY,width,height,drawColor){
      cc.fillStyle = drawColor;
      cc.fillRect(leftX,topY,width,height);
    }
  </script>
</canvas>