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
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.
Search WWH ::

Custom Search