I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the walls.

I managed to do the collision with walls perfectly but now the problem is with the collision with other balls. I am using the following code for it:

//Check collision between two bodies
function collides(b1, b2) {
    //Find the distance between their mid-points
    var dx = b1.x - b2.x,
        dy = b1.y - b2.y,
        dist = Math.round(Math.sqrt(dx*dx + dy*dy));

    //Check if it is a collision
    if(dist <= (b1.r + b2.r)) {
        //Calculate the angles 
        var angle = Math.atan2(dy, dx),
            sin = Math.sin(angle),
            cos = Math.cos(angle);

        //Calculate the old velocity components
        var v1x = b1.vx * cos,
            v2x = b2.vx * cos,
            v1y = b1.vy * sin,
            v2y = b2.vy * sin;

        //Calculate the new velocity components
        var vel1x = ((b1.m - b2.m) / (b1.m + b2.m)) * v1x + (2 * b2.m / (b1.m + b2.m)) * v2x,
            vel2x = (2 * b1.m / (b1.m + b2.m)) * v1x + ((b2.m - b1.m) / (b2.m + b1.m)) * v2x,
            vel1y = v1y,
            vel2y = v2y;

        //Set the new velocities
        b1.vx = vel1x;
        b2.vx = vel2x;
        b1.vy = vel1y;
        b2.vy = vel2y;
    }
}

You can see the experiment here. The problem is, some balls overlap each other and stick together while some of them rebound perfectly. I don't know what is causing this issue. Here's my balls object if that matters:

function Ball() {
    //Random Positions
    this.x = 50 + Math.random() * W;
    this.y = 50 + Math.random() * H;

    //Random radii
    this.r = 15 + Math.random() * 30;
    this.m = this.r;

    //Random velocity components 
    this.vx = 1 + Math.random() * 4;
    this.vy = 1 + Math.random() * 4;

    //Random shade of grey color
    this.c = Math.round(Math.random() * 200);

    this.draw = function() {
        ctx.beginPath();
        ctx.fillStyle = "rgb(" + this.c + ", " + this.c + ", " + this.c + ")";
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        ctx.fill();
        ctx.closePath();
    }
}