If a picture is worth a thousand words, how much are sixty pictures per second worth?
You can easily bring your Canvas creations to life by animating them. Usually this is done by clearing the Canvas and then drawing the new frame, where the object has a different position, shape, size or color.
requestAnimationFrame(myFunction);
This is a method which calls 'myFunction' before the screen is repainted (which typically happens around 60 times per second).
Of course you have to replace 'myFunction' with the actual name of your function you want to be executed periodically - in our executable code it's 'animate'.
To have a continuous animation, you need to execute it once from the main program (line [2] in our example above - to trigger the first iteration of the animation function) and then again at the end of the animation function [7]- to trigger each subsequent iteration.
The main program in our simple example above consist only of two lines:
- initiate the counter
- initiate the animation
The animation function is also extremely simple:
- clear the canvas
- draw the rectangle. Because the y coordinate depends on the counter, the rectangle is moving down in each frame, as the counter increases.
- increase the counter
By tying the size coordinate to the sine function, we can get a pulsating shape. Replace lines [5-6] with:
How about we fire our rectangle from a cannon?
The x coordinate will be proportional to the counter - our rectangular cannon ball will move to the right.
The y coordinate will travel on a parabolic curve: counter².
We'll also slow our counter ten times, to give you more time to admire our cannonade. Paste this starting in line [5]:
let y = (counter - 20) * (counter - 20);
context.fillRect(counter * 8, y, 40, 40);
requestAnimationFrame(animate);
counter = counter + .1;
}