Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

How it Works: Vivifying the Canvas

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.

step1_code
step2_code
step3_code
// --- Constants
const 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 context
var ctx;
var ballX;
var ballY;
var vX = 2.0;
var vY = 2.25;

In step six ...