The <canvas> for this drawing is 640 pixels wide and 480 pixels tall. I create the sky by drawing a blue rectangle in the top half of the <canvas> and I create the ground by drawing a green rectangle in the bottom half. I could have used solid colors for the sky and the ground, but I decided to create the illusion of distance by using linear gradients.

When we define a linear gradient, we give the computer two colors: a starting color and an ending color. Then the computer generates all of the colors in between on its own. For the sky, I told the computer to fill the rectangle starting with a dark blue and ending with a light blue . These are known as color stops.

Colors are created by combining red, green, and blue lights in different intensities. Minimum intensity is 0 and maximum intensity is 255. For example, yellow is red 255, green 255, and blue 0.

Color stop 1: red: , green: , blue:

Orange is red 255, green 165, and blue 0.

Color stop 2: red: , green: , blue:

Once we have defined our two color stops, we can use them to fill a rectangle with a linear gradient. When we tell the browser to draw a rectangle, we have to specify the width, height, and coordinates of the rectangle in pixels. The top left corner of the <canvas> is (0, 0).

Rectangle: x-coordinate: , y-coordinate: , width: , height:

Change the values in the number fields and see what happens. For this drawing, I gave the <canvas> a light gray background so that its boundaries are easier to see.

Learn more about the sun.