I have just started coding.  Anything to help simply or improve the code?This is fully finished and ready to play, though the ball bounces off the wall directly behind the paddle, rather than off the paddle itself.Edit: After playing around with the game. One of my friends pointed out that whenever I scroll down on the page, the mouse moves the bottom of the paddle while whenever I scroll up, the mouse moves the middle of the paddle. why is this? var canvas; var canvasContext; var ballX = 400; var ballY = 300; var ballSpeedX = 7; var ballSpeedY = 4; var player1Score = 0; var player2Score = 0; const WINNING_SCORE = 10; var showingWinScreen = false; var paddle1Y = 250; var paddle2Y = 250; const PADDLE_HEIGHT = 100; const PADDLE_WIDTH = 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 framesPerSecond = 30;  setInterval(function() {   moveEverything();   drawEverything();  }, 1000/framesPerSecond);  canvas.addEventListener('mousedown',handleMouseClick);  canvas.addEventListener('mousemove',   function(evt){    var mousePos = calculateMousePos(evt);    paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);   });        canvasContext.font = 30px Ariel; } function ballReset() {  if(player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {    showingWinScreen = true;  }  ballSpeedX = -ballSpeedX;  ballX = canvas.width/2;  ballY = canvas.height/2;  paddle1Y = 250;  paddle2Y = 250; } function computerMovement() {  var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);  if(paddle2YCenter < ballY - 35) {   paddle2Y = paddle2Y + 6;  } else if(paddle2YCenter > ballY + 35) {   paddle2Y = paddle2Y - 6;  } } function moveEverything() {  if(showingWinScreen) {   return;  }  computerMovement();  ballX += ballSpeedX;  ballY += ballSpeedY;  if(ballX < 0) {   if(ballY > paddle1Y &&     ballY < paddle1Y+PADDLE_HEIGHT) {    ballSpeedX = -ballSpeedX;    var deltaY = ballY - (paddle1Y+PADDLE_HEIGHT/2);    ballSpeedY = deltaY * 0.35;    } else {    player2Score += 1;    ballReset();   }  }  if(ballY < 0) {   ballSpeedY = -ballSpeedY;  }  if(ballX > canvas.width) {   if(ballY > paddle2Y &&    ballY < paddle2Y+PADDLE_HEIGHT) {    ballSpeedX = -ballSpeedX    var deltaY = ballY - (paddle2Y+PADDLE_HEIGHT/2);    ballSpeedY = deltaY * 0.35;    } else {    ballReset();    player1Score += 1;   }  }  if(ballY > canvas.height) {   ballSpeedY = -ballSpeedY;  } } function drawNet() {  for(var i=0;i<canvas.height;i+=40) {   colorRect(canvas.width/2-1,i,2,20,'white');  } } function drawEverything() {  //background color  colorRect(0,0,canvas.width,canvas.height,'black');  if(showingWinScreen) {   canvasContext.fillStyle = 'white';   if(player1Score >= WINNING_SCORE) {    canvasContext.fillText(You Won!, 350, 200);   } else if(player2Score >= WINNING_SCORE) {    canvasContext.fillText(You Lost,350,200);   }   canvasContext.fillText(click to continue, 350, 300);   return;  }  drawNet();  //player paddle  colorRect(10,paddle1Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');  //CPU paddle  colorRect(canvas.width-PADDLE_WIDTH-10,paddle2Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');  //ball  colorCircle(ballX,ballY,10,'white');  canvasContext.fillText(player1Score,100,100);   canvasContext.fillText(player2Score,canvas.width-100,100); } function colorCircle(centerX,centerY,radius,drawColor) {  canvasContext.fillStyle = drawColor;  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); }  <!DOCTYPE html> <html> <title>Pong: The Classic Arcade Game, Now in HTML5</title>     Welcome to my first HTML5 game!<br>     <br>     Use the mouse to control the left paddle,     and enjoy the classic game!<br>     <br>     Game wins at 11!<br>     <br>     Scroll down to see the bottom of the game canvas<br> <canvas id=gameCanvas width=800 height=600></canvas>  </html>
Classing Pong game
javascript;beginner;game;html5;canvas