Paddle doesn't reflect ball
<p>I'm making a game and the game needs a paddle that reflects a ball, but when I wrote the code to detect if the ball hits the paddle, the paddle didn't reflect the ball, can anyone help me?</p>

<p>HTML</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;

    &lt;title&gt;First Game - Section 1 to 2&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;center&gt;
        &lt;canvas id="canvas" width="800" height="600" style="background-color: #000"&gt;&lt;/canvas&gt;
    &lt;/center&gt;

    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="main.JS"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>JavaScript</p>

<pre><code>/* VARIABLES */

var canvas; //canvas
var ctx; //context

var ballX; //balls x pos
var ballY; //balls y pos
var ballSpeedX; //balls speed in x direction
var ballSpeedY; //balls speed in Y direction

var paddleX; //paddles x pos
var paddleY; //paddles y pos
const PADDLE_WIDTH = 100; //paddles width
const PADDLE_HEIGHT = 10; //paddles height

const BRICK_WIDTH = 100; //width of bricks
const BRICK_HEIGHT = 50; //height of bricks
var brickGride = [];

var mouseX = 0;
var mouseY = 0;

/* WHEN DOCUMENT IS READY */

$("document").ready(function () {

    //set values to variables
    canvas = $("#canvas")[0]; //call canvas
    ctx = canvas.getContext("2d"); //get context

    ballX = 200;
    ballY = 100;
    ballSpeedX = 3;
    ballSpeedY = 3;

    paddleX = canvas.width / 2 - PADDLE_WIDTH / 2; //center paddle
    paddleY = canvas.height - 40; // 560 (40px from bottom of canvas);

    var fps = 120; //set fps

    setInterval(function () {

        draw(); //draw objects
        animate(); //animte objects
        collision(); //detect collision

        $(canvas).bind("mousemove", paddleControl); //move paddle

    }, 1000 / fps);

});

/* FUNCTIONS */

function draw() {

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBall(ballX, ballY, 10, "white"); //call function that draws ball

    drawPaddle(paddleX, paddleY, PADDLE_WIDTH, PADDLE_HEIGHT, "white"); //call function that draws paddle

}

function animate() {

    //animate ball
    ballX += ballSpeedX;
    ballY += ballSpeedY;

}

function collision() {

    //check if ball hits wall

    //x walls
    if (ballX &gt;= canvas.width) { //right

        ballSpeedX = -ballSpeedX;

    }
    if (ballX &lt;= 0) { //left

        ballSpeedX = -ballSpeedX;

    }

    //y walls
    if (ballY &lt;= 0) { //top

        ballSpeedY = -ballSpeedY;

    }
    if (ballY &gt;= canvas.height) { //bottom

        ballReset();

    }

    //Detect if ball hits paddle

    //get paddles top, bottom, right, and left sides
    var paddleTop = paddleY; //top
    var paddleBottom = paddleTop + PADDLE_HEIGHT; //bottom
    var paddleRight = paddleLeft + PADDLE_WIDTH; //right
    var paddleLeft = paddleX; //left

    if (ballY &gt; paddleTop &amp;&amp; // below the top of paddle
        ballY &lt; paddleBottom &amp;&amp; // above bottom of paddle
        ballX &gt; paddleLeft &amp;&amp; // right of the left side of paddle
        ballX &lt; paddleRight) { // left of the left side of paddle

        ballSpeedY *= -1;

        var paddleCenter = paddleX + PADDLE_WIDTH / 2; //center of paddle
        var ballToPaddle = ballX - paddleCenter; //distance from the ball to the center of paddle
        ballSpeedX = ballToPaddle * 0.35; //ball control
    }
}

function paddleControl(e) {
    //get mouse pos
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;

    mouseX = e.clientX - rect.left - root.scrollLeft;
    mouseY = e.clientY - rect.top - root.scrollTop;

    paddleX = mouseX;

}

function ballReset() {

    ballX = canvas.width / 2 - 5;
    ballY = canvas.height / 2 - 5;

}

/* OBJECT VARIABLES */

function drawBall(x, y, r, color) {

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();


}

function drawPaddle(x, y, w, h, color) {

    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);

}
</code></pre>