Why does my canvas circle not bounce properly?

Question

What I did is, initially the circle is not visible. Whenever arrow keys are pressed, it forwards in the respective direction.

PROBLEM

Whenever the event is triggered the speed of the circle gets added and ultimately it goes out of the viewport.Also, please suggest me a better way to do it.

Source Code

var x = 100;
var y = 150;
var dx = 10;
var dy = 10;
var right = false;
var left = false;
var down = false;
var up = false; 



function animate() {
    requestAnimationFrame   (animate);

    c.beginPath();
    c.strokeStyle = "purple";
    c.lineWidth = 10;
    c.fillStyle = "red";
    c.arc(x, y, 30, 0, Math.PI * 2);
    c.stroke();
    c.fill();
    if (right) {
        x += dx;
    }
    if (left) {
        x -= dx;
    }

    if (up) {
        y -= dy;
    }
    if (down) {
        y += dy;
    }
    else if (x + 30 > canvas.width || x - 30 < 0) {
        dx = -dx;
    }
    else if (y + 30 > canvas.height || y - 30 < 0) {
        dy = -dy;
    }
}





window.addEventListener("keydown", handleKeyRight);
function handleKeyRight(key) {
    if (key.keyCode == "39") {
        right = true;
        left = false;
        up = false;
        down = false;
        animate();

    }
}
window.addEventListener("keydown", handleKeyLeft);
function handleKeyLeft(key) {
    if (key.keyCode == "37") {
        left = true;
        up = false;
        down = false;
        right = false;
        animate();

    }
}



window.addEventListener("keydown", handleKeyUp);
function handleKeyUp(key) {
    if (key.keyCode == "38") {
        up = true;
        down = false;
        right = false;
        left = false;
        animate();

    }
}
window.addEventListener("keydown", handleKeyDown);
function handleKeyDown(key) {
    if (key.keyCode == "40") {
        down = true;
        right = false;
        left = false;
        up = false;
        animate();

    }

}

Answer 1

Don't call animate in your key handlers, let your animation loop loop alone.

 const canvas = document.querySelector("canvas"); const c = canvas.getContext("2d"); var x = 100; var y = 150; var dx = 10; var dy = 10; var right = false; var left = false; var down = false; var up = false; function animate() { requestAnimationFrame (animate); c.clearRect(0, 0, canvas.width, canvas.height); c.beginPath(); c.strokeStyle = "purple"; c.lineWidth = 10; c.fillStyle = "red"; c.arc(x, y, 30, 0, Math.PI * 2); c.stroke(); c.fill(); if (right) { x += dx; } if (left) { x -= dx; } if (up) { y -= dy; } if (down) { y += dy; } else if (x + 30 > canvas.width || x - 30 < 0) { dx = -dx; } else if (y + 30 > canvas.height || y - 30 < 0) { dy = -dy; } } window.addEventListener("keydown", handleKeyRight); function handleKeyRight(key) { if (key.keyCode == "39") { right = true; left = false; up = false; down = false; } } window.addEventListener("keydown", handleKeyLeft); function handleKeyLeft(key) { if (key.keyCode == "37") { left = true; up = false; down = false; right = false; } } window.addEventListener("keydown", handleKeyUp); function handleKeyUp(key) { if (key.keyCode == "38") { up = true; down = false; right = false; left = false; } } window.addEventListener("keydown", handleKeyDown); function handleKeyDown(key) { if (key.keyCode == "40") { down = true; right = false; left = false; up = false; } } // a single call to 'animate' animate();

 <canvas width=500 height=500></canvas>