title: Random moving position for sprite image
body: <p>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?</p>
  
  <p>Here is my code for the changing of direction and how it moves:</p>
  
  <pre><code>Fish.prototype.changeDirection = function () {
      speedXSign = this.speedX &gt; 0 ? 1 : -1;
      speedYSign = this.speedY &gt; 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) &gt;= canvas.width &amp;&amp; this.speedX &gt; 0 || 
          (this.xPos - this.frameWidth * this.frameScale / 2) &lt;= 0 &amp;&amp; this.speedX &lt;= 0) {
          this.speedX = -this.speedX;
      }
  
      this.yPos += this.speedY;
      if ((this.yPos + this.frameHeight * this.frameScale / 2) &gt;= canvas.height &amp;&amp; this.speedY &gt; 0 || 
          (this.yPos - this.frameHeight * this.frameScale / 2) &lt;= 0 &amp;&amp; this.speedY &lt;= 0) {
          this.speedY = -this.speedY;
      }
  };
  </code></pre>