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.

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

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.