How it Works: Vivifying the Canvas
In this lesson, we will bring our canvas to life!
We'll cover the following...
How it works
In steps one and two, you implemented the single calculation that computes the new ball coordinates. The for loop you added in step three calculated all 25 positions of the ball, but it did this so fast that you could not see that the ball is being animated.
// --- Constantsconst HEIGHT = 250;const WIDTH = 500;const BALL = 12;const SOIL = 17;const GRASS = 3;const BALLCOLOR = '#CC333F';const SKYCOLOR = '#9CC4E4';const SOILCOLOR = '#6A4A3C';const GRASSCOLOR = '#93A42A';const GRAV = 0.02;// --- Drawing contextvar ctx;var ballX;var ballY;var vX = 2.0;var vY = 2.25;
In step six ...