Random moving position for sprite image

Question

Currently when my sprite is moving on the canvas, it will only bounce off after hitting the side of the canvas. Is there a way to let my sprite change to another direction at random position on the canvas?

Here is my code for the changing of direction and how it moves:

Fish.prototype.changeDirection = function () {
    speedXSign = this.speedX > 0 ? 1 : -1;
    speedYSign = this.speedY > 0 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 2);
    this.speedY = speedYSign * (1 + Math.random() * 2);
};

Fish.prototype.move = function () {
    this.animIndex++;
    if ( this.animIndex == animFrames.length) this.animIndex = 0;

    this.xPos += this.speedX;
    if ((this.xPos + this.frameWidth * this.frameScale / 2) >= canvas.width && this.speedX > 0 || 
        (this.xPos - this.frameWidth * this.frameScale / 2) <= 0 && this.speedX <= 0) {
        this.speedX = -this.speedX;
    }

    this.yPos += this.speedY;
    if ((this.yPos + this.frameHeight * this.frameScale / 2) >= canvas.height && this.speedY > 0 || 
        (this.yPos - this.frameHeight * this.frameScale / 2) <= 0 && this.speedY <= 0) {
        this.speedY = -this.speedY;
    }
};

Answer 1

One fairly simple option is to pick a random amount of time and have the fish change directions after that amount of time. My first thought would be to use setTimeout. I noticed the comparison in your changeDirection function was backward so I fixed that and set it to call itself after some random amount of time.

Fish.prototype.changeDirection = function () {
    var me = this;
    var speedXSign = this.speedX < 0 ? 1 : -1;
    var speedYSign = this.speedY < 0 ? 1 : -1;
    this.speedX = speedXSign * (1 + Math.random() * 2);
    this.speedY = speedYSign * (1 + Math.random() * 2);
    var time = 1000 + 2000*Math.random();
    setTimeout(function() {me.changeDirection()}, time);
};

You can change how frequently they turn around by adjusting the time variable. Then you'll need to initialize the changeDirection loop when you add a new fish so init might look like this:

function init() {
    frameWidth = imgFish.width / frameCount ; 
    frameHeight = imgFish.height ; 

    document.getElementById("button").onclick = function() {
        // create another fish using the Fish class
        var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
        // put this new fish into the fishes[] array
        fishes.push(anotherFish) ;
        // make it start changing directions
        anotherFish.changeDirection();
        // draw this new fish
        anotherFish.drawFish();
    }
    animate();
}

Also you don't want to change direction every frame so take the fish.changeDirection(); line out of your animate function.

As a side note, you might consider making them change x and y directions independently or randomly instead of every time. This makes it look a more natural.

    var speedXSign = Math.random() < 0.5 ? 1 : -1;
    var speedYSign = Math.random() < 0.5 ? 1 : -1;

Edit: JSFiddle