I'm losing my mind trying to get collision/bounce in a circle to work right. I've looked at a dozen examples and tried to adapt to my school project but it always ends up inconsistent. And this is just on one part, haven't even tried to adapt to the smaller inside curve yet .
This is all for a web development class project. I really wanted to do something more graphic related instead of everyone elses word games, but it's kinda kicking my ass.

here is the full mess

or here is the specific piece
Code:
this.move = function() {
    if (this.firetravel > 0) {
        myGameArea.context.fillStyle = color;
        myGameArea.context.beginPath();
        myGameArea.context.arc(this.x, this.y, this.r, 0, Math.PI*2);
        myGameArea.context.closePath();
        myGameArea.context.fill();


              // here to ...
        dx = this.x-640;
        dy = this.y-720;
        dist = Math.sqrt(dx*dx + dy*dy);
            //this.angle = Math.atan2(dy,dx);
        dir = Math.atan2(this.y, this.x);
        
            //newdir = 2*dir - 
        if (dist > 600) {
            this.xmove *= Math.cos(dir - this.angle);
            this.ymove *= Math.sin(dir - this.angle);
        }
              // ... here is the extent of the angle/bounce code. Aiming 45* to the
              //  will bounce it some, but the rest is fail. plus some aborted code I
              //  left in but can't fit it into mine. (this code cleaned up for readability)

        this.x += this.xmove * this.speed;
        this.y += this.ymove * this.speed;
    }
}