Javascript Eskiv game if else both executed

I was writing an Eskiv game and I cant seem to solve this problem where the vertical balls would go diagonal meaning the x position is also changing. However the horizontal balls would work as designed. The only thing I could think of is the if/else statements are both executing. I have posted the code below which is a simple browser game.

var canvas = document.getElementById('game-area');
var context = canvas.getContext('2d');
var player = {
    x: 50,
    y: 50,
    radius: 15 
};
var food = {
    x: 0,
    y: 0,
    width: 30,
    height: 30
};
var balls = [];
var score = 0;
var keys = {
    down: false,
    up: false,
    left: false,
    right: false
};

function setFood(){
    food.x = Math.floor(Math.random() * (500 - 2*food.width)) + food.width;
    food.y = Math.floor(Math.random() * (375 - 2*food.height)) + food.height;
}

function addBall(){
    var ball = {
        isVertical: Math.floor(Math.random()*2) === 1,
        direction: Math.floor(Math.random()*2) === 1,
        radius: 10,
        x: (Math.floor(Math.random() * (500 - 2*10)) + 10),
        y: (Math.floor(Math.random() * (375 - 2*10)) + 10)
    }
    balls.push(ball);
}

function drawPlayer() {
    context.beginPath();
    context.arc(player.x, player.y, player.radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
}

function drawBalls() {
    for (ball of balls) {
        context.beginPath();
        context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'blue';
        context.fill();
        context.closePath();
    }
}

function drawFood() {
    context.beginPath();
    context.rect(food.x, food.y, 30, 30);
    context.fillStyle = 'gray';
    context.fill();
    context.strokeStyle = 'black';
    context.stroke();
    context.closePath();
}

function movePlayer() {
    if (keys.down) {
        if ((player.y + 15) + 2 < canvas.height) {
             player.y += 2;
        }  
    }
    if (keys.up) {
        if ((player.y - 15) - 2 > 0) {
             player.y -= 2;
        }  
    }
    if (keys.left) {
        if ((player.x - 15) - 2 > 0) {
             player.x -= 2;
        }  
    }
    if (keys.right) {
        if ((player.x + 15) + 2 < canvas.width) {
             player.x += 2;
        }  
    }
}

function moveBalls(){
    for(var x = 0; x < balls.length; x++){
        var ball = balls[x];
        if (ball.isVertical){
            if (ball.y + 2 > canvas.height){
                ball.direction = false;
            } else if (ball.y - 2 < 0) {
                ball.direction = true;
            }

            if( ball.direction ) {
                ball.y += 2;
            } else {
                ball.y -= 2;
            }
        } else {
            if (ball.x + 2 > canvas.width){
                ball.direction = false;
            } else if (ball.x - 2 < 0)
                ball.direction = true;
            }

            if( ball.direction ) {
                ball.x += 2;
            } else {
                ball.x -= 2;
        }
    }
}

function checkFoodCollision() {
    var dx = Math.abs(player.x - (food.x + food.width/2));
    var dy = Math.abs(player.y - (food.y + food.height/2));

    if (dx < (food.width/2) + player.radius && dy < (food.height/2) + player.radius){
        setFood();
        score++;
        addBall();
    }
}

function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    movePlayer();
    moveBalls();
    checkFoodCollision();
    drawFood();
    drawPlayer();
    drawBalls();
}

function handleKeyDown(e) {
    if (e.type === "keydown") {
        if (e.keyCode === 38) {
            keys.up = true;
        } 

        if (e.keyCode === 40) {
            keys.down = true;
        } 

        if (e.keyCode === 37) {
            keys.left = true;
        } 

        if (e.keyCode === 39) {
            keys.right = true; 
        }
    } else if (e.type === 'keyup') {
        if (e.keyCode === 38) {
            keys.up = false;
        } 

        if (e.keyCode === 40) {
            keys.down = false;
        } 

        if (e.keyCode === 37) {
            keys.left = false;
        } 

        if (e.keyCode === 39) {
            keys.right = false; 
        }
    }
}
addBall();
setFood();
window.addEventListener('keydown', handleKeyDown, true);
window.addEventListener('keyup', handleKeyDown, true);
setInterval(draw, 10);