S2JS - How to fall and bounce convincingly : Rebound problem 2 fixed

Here's that line of code to rectify things.

It's placed inside the if-statement that detects the object being at or past the bottom of the canvas, and has the effect of moving the object back to the exact bottom. So it can never go past the bottom.

this.y = myCanvas.height - this.MyImg.height; // be exactly at the bottom

Seems reasonable, and now it never goes past the bottom. But now it's over-rebounding again.

<html> <head> <title> Bouncing objects</title> </head> <body> <canvas id="myCanvas" width=350 height=300 style="background-color:powderblue"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } var gravity = 0.25; var FPS = 40; // How many frames per second MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing if (this.x < 0) {this.velocity_x= -this.velocity_x}; // bounce off sides if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x}; if (this.y + this.MyImg.height > myCanvas.height) { this.velocity_y= -this.velocity_y; // bounce off the bottom this.y = myCanvas.height - this.MyImg.height; // be exactly at the bottom } else { // accelerate by gravity, but only if we're not actually bouncing at this moment this.velocity_y = this.velocity_y + gravity; } } var MyBall= new MySprite("http://s2js.com/img/etc/tennis-ball.png"); MyBall.velocity_x= 0; MyBall.velocity_y= 0; MyBall.y= 80; MyBall.x= myCanvas.width / 2; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); MyBall.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>