text: var canvas;
  var canvasContext;
  var ballX = 50;
  var ballY = 100;
  var ballSpeedX = 10;
  var ballSpeedY = 4;
  
  var player1Score = 0;
  var player2Score = 0;
  const WINNING_SCORE = 3;
  
  var showingWinScreen = false;
  
  var paddle1Y = 250;
  var paddle2Y = 250;
  const PADDLE_HEIGHT = 100;
  const PADDLE_THICKNESS = 10;
  
  function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
      x: mouseX,
      y: mouseY,
    };
  }
  
  function handleMouseClick(evt) {
    if (showingWinScreen) {
      player1Score = 0;
      player2Score = 0;
      showingWinScreen = false;
    }
  }
  
  window.onload = function () {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
  
    var framePerSecond = 30;
    setInterval(function () {
      moveEverything();
      drawEverything();
    }, 1000 / framePerSecond);
  
    canvas.addEventListener('mousedown',
     function (evt) {
      handleMouseClick(evt);
    });
  
    canvas.addEventListener('mousemove',
     function (evt) {
      var mousePos = calculateMousePos(evt);
      paddle1Y = mousePos.y - (PADDLE_HEIGHT / 2);
  
    });
  };
  
  function ballReset() {
    if (player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
      showingWinScreen = true;
    }
  
    ballSpeedX *= -1;
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
  }
  
  function computerMovement() {
    var paddle2YCenter = paddle2Y + PADDLE_HEIGHT / 2;
    if (paddle2YCenter < ballY - 20) {
      paddle2Y += 9;
    }else if (paddle2YCenter > ballY + 20) {
      paddle2Y -= 6;
    }
  }
  
  function moveEverything() {
    if (showingWinScreen) {
      return;
    }
  
    computerMovement();
  
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX < 0) {
      if (ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
        ballSpeedX *= -1;
  
        var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
        ballSpeedY = deltaY * 0.35;
      }else {
        player2Score++;
        ballReset();
      }
    }
  
    if (ballX > canvas.width) {
      if (ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
        ballSpeedX *= -1;
  
        var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT / 2);
        ballSpeedY = deltaY * 0.35;
      }else {
        player1Score++;
        ballReset();
      }
    }
  
    if (ballY < 0) {
      ballSpeedY *= -1;
    }
  
    if (ballY > canvas.height) {
      ballSpeedY *= -1;
    }
  }
  
  function drawNet() {
    for (var i = 0; i < canvas.height; i += 40) {
      colorRect(canvas.width / 2 - 1, i, 2, 20, 'white');
    }
  }
  
  function drawEverything() {
    //BackGround
    colorRect(0, 0, canvas.width, canvas.height, 'black');
  
    if (showingWinScreen) {
      canvasContext.fillStyle = 'white';
  
      if (player1Score >= WINNING_SCORE) {
        canvasContext.fillText('Left Player Won!', 350, 200);
      } else if (player2Score >= WINNING_SCORE) {
        canvasContext.fillText('Right Player Won!', 350, 200);
      }
  
      canvasContext.fillText('Click To Continue', 350, 500);
      return;
    }
  
    drawNet();
  
    //Left Paddle
    colorRect(0, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');
  
    //Right Paddle
    colorRect(canvas.width - PADDLE_THICKNESS, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');
  
    //Ball
    colorCircle(ballX, ballY, 10);
  
    canvasContext.fillText(player1Score, 100, 100);
    canvasContext.fillText(player2Score, canvas.width - 100, 100);
  }
  
  function colorCircle(centerX, centerY, radius) {
    canvasContext.fillStyle = 'white';
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
    canvasContext.fill();
  }
  
  function colorRect(leftX, topY, width, height, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX, topY, width, height);
  }
  