The first image on the canvas is the spacecraft “Philae”, slowly descending (animated) on the comet. In the background, we will animate the night sky. Later, we will make the sky roll on the canvas from right to left.
We will define the canvas (by its ID) in the initial part of the script. A single page may have more than one <canvas>. Therefore, the ID is important for reference in the script. Along with the ID, we have defined the width and height attribute of the <canvas>.
The next thing we have done, is call the getContext() method, using a string called 2d. The method provides us with many properties, which will help us with our graphics and animation scripts. We can now draw an image, create boxes, shapes etc. However, we are not covering every property in this article.
This is not a predefined function, but we have defined it. We will simulate the space (the final frontier). No, we are not going deep inside it. It is not my subject. It is just a theme. A space and a few shining stars, to replicate the spacecrafts handing on a comet.
Here in this function we will add two images on the canvas, the spacecraft Philae and the image of a comet (not the real comet I guess). The animation happens inside the rollit() function. It is an infinite loop, set by window.setTimeout() method.
Inside the loop, we are re-drawing the elements repeatedly using drawImage() method. The real animation is the stars, the space and Philae. We have converted the space and star context into an image, and scrolled it from right to left. Finally, the spacecraft slowly descends on the comet.
That is it.