Change of property value of an object instance is affecting others objects as well

When I change the values of a property of an instance of an object, I find that the other instances of the object have the value of that specific property changed too. Look at my code and you’ll see.

window.onload = function() {

    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) ) + min;
    }

    let canva1 = document.getElementById("canva1");
    
    let canvaWidth = 600;
    let canvaHeight = 500;

    canva1.width = canvaWidth;
    canva1.height = canvaHeight;
    canva1.style.border = "1px solid black";

    let ctx = canva1.getContext("2d");

    const Bola = {
        x: null,
        y: null,
        raio: randomInt(10, 30),
        direcaoX: null,
        direcaoY: null,
        gerarBola: function() {

            if (this.direcaoX == null) {
                let a = randomInt(0, 1);
                if (a == 0) {
                    this.direcaoX = false;
                }
                else {
                    this.direcaoX = true;
                }
            }
            if (this.direcaoY == null) {
                let a = randomInt(0, 1);
                if (a == 0) {
                    this.direcaoY = false;
                }
                else {
                    this.direcaoY = true;
                }
            }

            if (this.x == null) {
                this.x = randomInt(this.raio, canvaWidth-this.raio);
            }
            if (this.y == null) {
                this.y = randomInt(this.raio, canvaHeight-this.raio);
            }
            
            ctx.clearRect(0, 0, canvaWidth, canvaHeight);

            ctx.beginPath();
            ctx.arc(this.x, this.y, this.raio, 0, 2*Math.PI);
            ctx.fillStyle = "rgb(" + randomInt(0, 255) + "," + randomInt(0, 255) + "," + randomInt(0, 255) + ")";
            ctx.fill();
            ctx.strokeStyle = "rgb(" + randomInt(0, 255) + "," + randomInt(0, 255) + "," + randomInt(0, 255) + ")";
            ctx.stroke();

            if (this.x+this.raio < canvaWidth && this.direcaoX == true) {
                this.x++;
            }
            else if (this.x+this.raio >= canvaWidth && this.direcaoX == true) {
                this.x--;
                this.direcaoX = false;
            }
            else if (this.x-this.raio > 0 && this.direcaoX == false) {
                this.x--;
            }
            else if (this.x-this.raio <= 0 && this.direcaoX == false) {
                this.x++;
                this.direcaoX = true;
            }

            if (this.y+this.raio < canvaHeight && this.direcaoY == true) {
                this.y++;
            }
            else if (this.y+this.raio >= canvaHeight && this.direcaoY == true) {
                this.y--;
                this.direcaoY = false;
            }
            else if (this.y-this.raio > 0 && this.direcaoY == false) {
                this.y--;
            }
            else if (this.y-this.raio <= 0 && this.direcaoY == false) {
                this.y++;
                this.direcaoY = true;
            }
        }
    }

    let bola1 = Bola;
    let bola2 = Bola;
    let bola3 = Bola;
    let bola4 = Bola;
    let bola5 = Bola;

    setInterval(function() {
        bola1.gerarBola();
        bola2.gerarBola();
        bola3.gerarBola();
        bola4.gerarBola();
        bola5.gerarBola();

        console.log("Bola 1: " + bola1.x);
        console.log("Bola 2: " + bola2.x);
        console.log("Bola 3: " + bola3.x);
        console.log("Bola 4: " + bola4.x);
        console.log("Bola 5: " + bola5.x);
        
    }, 500);

}

Now, let me explain. I’m trying to create multiples instances of a moving ball using canvas. 5 of them, to be clear. I’ve created a “Bola” object with its own properties, so it doesn’t affect other instances. Btw, there’s also an index.html, but the only thing it have is a div with a “canva1” id.
I think the code is pretty self-explanatory. Try to execute it, and you’ll see what I’m talking about.
Also, the “500” in the end is how fast the ball is moving. I made it that slow so you can see in the console that all the balls are in the same position (or something like that). And, with every “ball” I add, the only thing happening is the one ball accelerating.
Btw.: Sorry for my bad english :p

I have no idea how to go further. After I created one ball, I tried what you can see in the “setInterval” part. It hasn’t created more ball. It only made x and y go +5 instead of the normal +1 (one per instance). Look at the console log, and try to delete the number of balls in the few last lines, and you’ll see.