To create smooth animations on the canvas, you need to repeatedly update your drawing based on changes in position, appearance, or other properties. The requestAnimationFrame method is built into the browser and is recommended for animation because it automatically synchronizes your updates with the browser's refresh rate, resulting in smoother motion and better performance compared to older methods like setInterval or setTimeout.

A typical animation loop involves several important steps:

• Clearing the canvas at the start of each frame to remove the previous drawing;
• Updating object properties such as position or color based on your animation logic;
• Redrawing all objects in their new positions.

Clearing the canvas is essential. If you do not clear it before drawing the next frame, your shapes will leave trails behind them, because each new drawing will be layered on top of the previous ones. By calling ctx.clearRect(0, 0, canvas.width, canvas.height), you ensure that each frame is drawn cleanly.

Animation timing is controlled by the browser, which calls your animation function just before the next repaint. This means your code will run at an optimal frame rate for the user's device, usually around 60 frames per second, unless you add logic to slow it down.

When animating multiple objects, you can update each object's position independently inside the animation loop. This allows you to create complex scenes where shapes move in different directions or at different speeds. Each frame, you clear the canvas, update every object's state, and redraw all objects.

To control animation speed and frame rate, you can use a few techniques:

• Adjust the amount by which you update positions each frame (for example, changing dx and dy values to make objects move faster or slower);
• Use timestamps provided by requestAnimationFrame to calculate the time between frames, allowing you to move objects by an amount that matches real elapsed time;
• Avoid using setInterval or setTimeout for animations, as these can lead to choppy motion and wasted resources.

By combining these strategies, you can ensure your canvas animations are smooth and responsive across different devices and browsers.