Drawing and updating the game

To draw to the screen, we will use the age-old animation principal of first clearing everything in the game space, then drawing each of the elements. The elements consists of the ball, the left and right side paddles the score:

function clearField() { 
  context.fillStyle = "#FFFFFF" 
  context.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT)
  context.strokeStyle = "#000000"
  context.strokeRect(0, 0, GAME_WIDTH, GAME_HEIGHT)
} 
function drawBall() { 
  context.beginPath()
  context.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2, false)
  context.fillStyle = "#C11B17"
  context.fill()
  context.strokeStyle = "#9F000F"
  context.stroke(); 
} 
function drawPad(x, y, w, h) { 
  context.fillStyle = "#306EFF"
  context.fillRect(x, y, w, h) 
  context.strokeStyle = "#2B65EC"
  context.strokeRect(x, y, w, h) 
} 
function drawPad1() { 
  drawPad(PAD_X_MARGIN, pad1Y, PAD_THICKNESS...