COLLISIONN RESPONSE NOT WORKING IN JS WITH HTML CANVAS

I tried writing some physics with vanilla js to simulate collision of a particle inside a circular container on the HTML canvas
the collision detection seems to be working fine but the collision response part seems broken and cant fix it no matter what i change

i think there is a problem with how the angles are changing since i have use two angle

1. angle between horizontal and line joining center of circle container to point of collision and
   2)angle between the velocity vector and the tangent vector at the point of collision
   but im guessing i messed up while making the tangent vector or getting the collision angle
   or maybe both
   anyways can’t seem to fix it no matter what (;-;)
   pls help (T_T)

> const canvas = document.getElementById("MyCanvas");
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = "white";
Balls = [];
track = [];
collisionDetected = false;
class Vector{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    drawVector(v,color,lineWidth){
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineWidth = lineWidth;
        ctx.moveTo(this.x,this.y);
        ctx.lineTo(v.x,v.y);
        ctx.stroke();
    
    }
    add(passedVector){
        return (new Vector(this.x + passedVector.x, this.y+passedVector.y));
    }
    sub(passedVector){
        return(new Vector(this.x - passedVector.x , this.y-passedVector.y));
    }
    mult(n){
        return (new Vector(this.x*n,this.y*n));
    }
    mag(){
        return Math.hypot(this.x,this.y);
    }
    unit(){
        return(new Vector(this.x/this.mag(),this.y/this.mag()));
    }
    static dot(v1,v2){
        return v1.x*v2.x + v1.y*v2.y;
    }
}
const hzVector = new Vector(1,0);
const vtVector = new Vector(0,1);
class Circle{
    constructor(){
        this.pos = new Vector(canvas.width*0.5,canvas.height*0.5);
        this.radius = 250;

    }
    drawCircle(color,lineWidth){
        ctx.strokeStyle = color;
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.arc(this.pos.x,this.pos.y,this.radius,0,Math.PI*2);
        ctx.stroke();
    }
}



const circle = new Circle();




class Ball{
    constructor(circle,mod_X,mod_Y){
        this.circle = circle;
        this.pos = new Vector(circle.pos.x + mod_X,circle.pos.y + mod_Y);
        this.r = 20;
        this.vel = new Vector(0,5);

    }
    drawBall(color){
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(this.pos.x,this.pos.y,this.r,0,Math.PI*2);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(this.pos.x,this.pos.y,2,0,Math.PI*2);
        ctx.fill();
    }
    update(){
        this.pos = this.pos.add(this.vel);
    }
}

const Ball1 = new Ball(circle,40,80);
Balls.push(Ball1);

function collisionDetection(b , c){
    let radialDist = b.pos.sub(c.pos); 
    // console.log(dist);
    // c.pos.drawVector(b.pos,"red",2);
    if (c.radius <= radialDist.mag()+b.r){
        collisionDetected = true;
        track.push(b.pos);
    }
    else{
        collisionDetected = false;
    }
}

function penetrationResolution(b,c){
    let radialDist = b.pos.sub(c.pos); 
    if(radialDist.mag() + b.r >= c.radius){
        let pd = radialDist.mag() + b.r - c.radius;
        
        let d = radialDist.unit().mult(pd);
        b.pos = b.pos.sub(d);

    }
}

function collisionResponse(b,c){
   
    let collisionPoint = new Vector(b.pos.x+b.r/1.414-c.pos.x , b.pos.y+b.r/1.414-c.pos.y);
    // console.log(collisionPoint);
    let theta = Math.acos(Vector.dot(collisionPoint,hzVector)/collisionPoint.mag());
    if ((b.vel.x<0&&b.vel.y>0)||(b.vel.x<0&&b.vel>0)) theta = 2*Math.PI-theta;
    // console.log(theta);
    let tangentVector = new Vector(Math.cos(theta - Math.PI*0.5),Math.sin(theta-Math.PI*0.5));
    // console.log(tangentVector);
    tangentVector.drawVector(tangentVector.mult(50),"blue",2);
    let alpha =Math.acos(Vector.dot(tangentVector,b.vel)/(tangentVector.mag()*b.vel.mag()));
    console.log(alpha);
    if (Math.cos(alpha)<0) alpha = Math.PI - alpha;
    let newVel = new Vector(b.vel.mag()*Math.cos(alpha),-b.vel.mag()*Math.sin(alpha));
    
    // b.vel = newVel;
    // b.pos = b.pos.add(b.vel);

    
    let cosBeta = Vector.dot(collisionPoint,b.vel)/(b.vel.mag()*collisionPoint.mag());
}

function animate(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    circle.drawCircle("white",5);
    Ball1.drawBall("white");
    
    collisionDetection(Ball1,circle);
    if(collisionDetected){
        penetrationResolution(Ball1,circle);
        // console.log(Ball1.vel);
        collisionResponse(Ball1,circle);
        // console.log(Ball1.vel);
        

    }
    else{Ball1.update();}
    
    requestAnimationFrame(animate);
}
animate();