Ball physics

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
</head>

<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>

<script>
var ballX = 75;
var ballY = 75;
var ballSpeedX = 5;
var ballSpeedY = 7;

const PADDLE_WIDTH = 100;
const PADDLE_THICKNESS = 10;
const DIST_EDGE = 60;
var canvas, canvasContext;
var paddleX=100;
function updateMousePos(evt){
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;

    var mouseX = evt.clientX - rect.left- root.scrollLeft;


    paddleX = mouseX - PADDLE_WIDTH/2;

}

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

    var fps=60;
    setInterval(updateAll,1000/fps);

    canvas.addEventListener('mousemove', updateMousePos);

}

function updateAll(){
    moveAll();
    drawAll();
}

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

}
    function moveAll(){
    ballX += ballSpeedX;
    ballY += ballSpeedY;


        if (ballX<0){
            ballSpeedX *=-1;
        }
        if (ballX>canvas.width){
            ballSpeedX *=-1;
        }


        if (ballY < 0){
            ballSpeedY *=-1;
                        }

        var paddleTopEdgeY = canvas.height-DIST_EDGE;
        var paddleBottomEdgeY=paddleTopEdgeY+PADDLE_THICKNESS;
        var paddleLeftEdgeX=paddleX;
        var paddleRightEdgeX=paddleTopEdgeY+PADDLE_WIDTH;
        if (ballY > paddleTopEdgeY
        && ballY < paddleBottomEdgeY
        && ballX > paddleLeftEdgeX
        && ballX < paddleRightEdgeX){
            ballSpeedY*=-1;
            }
        if (ballY > canvas.height){
            ballReset();
        }
        }


    function drawAll(){
    //draw game background
        colorRect(0,0,canvas.width,canvas.height,'black');

        //draw ball
        colorCircle(ballX,ballY, 10, 'white'); // draw ball;
        //draw paddle
        colorRect(paddleX, canvas.height-DIST_EDGE,PADDLE_WIDTH,PADDLE_THICKNESS,'white');
        }


function colorRect(topLeftX,topLeftY,boxWidth,boxHeight,fillColor){
        canvasContext.fillStyle = fillColor;
        canvasContext.fillRect(topLeftX,topLeftY,boxWidth,boxHeight);

}
function colorCircle(centerX,centerY, radius, fillColor) {
    canvasContext.fillStyle = fillColor;
    canvasContext.beginPath();
    canvasContext.arc(centerX,centerY, 10, 0,Math.PI*2, true);
    canvasContext.fill();
}

</script>

</body>
</html>