I'm kind of new in JavaScript and coding in general, I've been watching tutorials and I'm trying to make a small particle system in JavaScript, so I created the particle class:

class Chakibum{
    cosntructor(){
        
        this.x = Math.random() * canvas.width;  
        this.y = Math.random() * canvas.height;
        this.size = randi(1, 6);
        this.velX = randi(-2, 3);
        this.velY = randi(4, 6);   //randi is a randomizer function i made to not have to do math random all the time
    }
    update(){
        this.x += this.velX;
        this.y += this.velY;
    }
    dibuparti(){
    ctx.fillStyle = 'red'
    ctx.beginPath();
    ctx.arc(this.x, this.y, 50, 0, Math.PI * 2);
    ctx.fill();

    }
}

But when I try to animate it the x value of the particles in the array return NaN, the code for the animation is:

function lalista(){
    for (let i = 0; i < 100; i++){
        labolitas.push(new Chakibum());
    }
}

lalista();

function manejo(){
    for (let i = 0; i < labolitas.length; i++){
        labolitas[i].update();
        labolitas[i].dibuparti();
    }
}
function anima(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
manejo();
requestAnimationFrame(anima);
}

randi function is:

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

If I change this.x and this.y in the dibuparti() in the chakibum class for numbers the particles show up but if I change it inside the constructor they still return NaN and don't show up. I tried changing the name of the values, commenting out the update(), changing the order of things, not using the randi() function I made, using it, and nothing worked, I don't understand what's wrong with the code, I've searched online but couldn't find anything, most NaN problems I found online are because of IF statements.

The first instance of NaN shows up inside the console when I run the code, inside the array of particles (empty array where every instance of chakibum goes) every chakibum returns NaN as its x and y value.