HTML and CSS Reference
In-Depth Information
// Add the velocity to the position in the X and Y axis
ballPositionX += ballVelocityX;
ballPositionY += ballVelocityY;
// Paint the ball
paintBall(ctx, ballRadius, ballPositionX, ballPositionY);
console.timeEnd("Painting Scene");
// Set the previous timestamp, which will be used
// in the "next" loop.
// Subtract the difference between the delta and the interval
// to account for the time that it took the computer to
// process the function.
previousTs = ts - (delta % interval);
}
// Call requestAnimationFrame again
requestAnimationFrame(update);
}
So far, the background is being rendered on every frame; if you place it outside the update loop (therefore, it will
only be painted once), you will notice that something like what you see in Figure
8-12
.
Figure 8-12.
As the yellow ball moves around the canvas and bounces against its limits, it leaves a trail
Like in previous “Dirty Rectangles” section, the reason why this happens is because you're not cleaning up
after yourself when you draw the ball in a new position. Luckily, there's an easy and highly efficient way to solve this
problem, which consists of grabbing the previous portion of the image that was covered by the ball.
