Stop javascript when the game is over

Question

How do I stop the game from running in the background. This simple pong game is for a school task. It shows showingGameOverScreen when ballX < 0. Then I want the game to break, or stop. Until I can for example write "click to restart the Game".

Same with the when player1Score == 1, "showingWinScreen".

var canvas;
var canvasContext;

var ballX = 300;
var ballY = 200;
var ballSpeedX = 5;
var ballSpeedY = 5;

var player1Score = 0;
const WINNING_SCORE = 1;
var showingWinScreen = false;
var showingGameoverScreen = true;

var paddle1Y = 150;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;

window.onload = function() {
  canvas = document.getElementById("gameCanvas");
  canvasContext = canvas.getContext("2d");

  var framesPerSecond = 30;
  setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000 / framesPerSecond);

  document.addEventListener('keydown', handleKeyDown, true, );
  //sets the function for paddle handling
  function handleKeyDown(event) {
    var keyCode = event.which || event.keyCode;

    switch (keyCode) {
      case 38:
        paddle1Y -= 5;
        break;
      case 40:
        paddle1Y += 5;
        break;
      default:
        // Avoid preventDefault() when not pressing expected keys
        return;
    }
    // Don't scroll window when pressing UP/DOWN
    event.preventDefault();
  }
}

function winningScore() {
  if (player1Score == WINNING_SCORE) {
    showingWinScreen = true;
  }
}

function ballReset() {
  //ballSpeedX = -ballSpeedX;
  ballX = canvas.width / 2;
  ballY = canvas.height / 2;
}

function moveEverything() {
  //ballX bouncing back
  ballX = ballX - ballSpeedX;
  //ball starting Y angle
  ballY = ballY + ballSpeedY;

  if (ballX < 0 /*600*/ ) {
    if (ballY > paddle1Y &&
      ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX = -ballSpeedX;
    }
  }
  if (ballX > canvas.width /*600*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedX = -ballSpeedX;
    player1Score += 1;
    winningScore();
    this.removeEventListener(event.type, moveEverything);
  }

  if (ballY < 0 /*600*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedY = -ballSpeedY;

  }

  if (ballY > canvas.height /*400*/ ) {
    /*ballSpeedX=5;*/
    ballSpeedY = -ballSpeedY;
  }
}

//draws all on the gameCanvas wich is black.
function drawEverything() {
  //Next line blanks the screen with black
  colorRect(0, 0, canvas.width, canvas.height, "black");

  if (ballX < 0) {
    canvasContext.fillStyle = "white";
    canvasContext.fillText("GameOver", canvas.width / 2, 200);
    return;
  }

  if (showingWinScreen) {
    canvasContext.fillStyle = "white";
    if (player1Score == WINNING_SCORE) {
      canvasContext.fillText("You Won!", canvas.width / 2, 200);
    }
    return;
  }

  //next line draw left paddle
  colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, "white");
  //next line draws ball from the function
  colorCircle(ballX, ballY, 10, "white");
  canvasContext.fillText(player1Score, 100, 100);
}

// summerize the ball information
function colorCircle(centerX, centerY, radius, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
  canvasContext.fill();
}

//summerize the canvas info, like; Color and width/height
function colorRect(leftX, topY, width, height, drawColor) {
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX, topY, width, height);
}

<canvas id="gameCanvas" width="600" height="400"></canvas>

Answer 1

When you call your game loop by calling setInterval you need to retrieve the ID of the interval it returns.

Now when you know the game is over, you need to stop that game loop by calling clearInterval with the ID of your game loop previously retrieved.

var gameLoopInterval = setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000/framesPerSecond);

// Later on, when the game is over
clearInterval(gameLoopInterval);