Lab 13 / Part 2: Advanced Canvas

C O N T E N T S

In this lab, you’ll be creating the following programs together in class:

Four By Seven
Checkerboard

You will then have the choice of completing any 2 out of the 4 additional programs on your own:

Checkers Game
Three Circles
Circle Grow
Hemisphere

1. Four By Seven

Name this file 4by7.html. Use 2 loops to make a 4 x 7 grid of light green circles:

4x7 example output

2. Checkerboard

Name this file checkerboard.html. Make a checkerboard that has alternating black and white squares:

checkerboard example output

Complete any 2 of the 4 additional programs below on your own & submit before this week’s deadline:

5. Checkers Game

Name this file checkersgame.html. Using that same checkerboard you made before, place blue and green pieces on the proper squares to start a game:

checkers game example output

6. Three Circles

Name this file threecircles.html. Make 3 concentric circles. The largest has a radius of 100 px and is red. The medium circle has a radius of 75 px and is blue. The smallest circle has a radius of 50 px and is green:

3 circles example output

7. Circle Grow

Name this file circlegrow.html. Use a loop to make a series of 9 or more circles that grow in size with each iteration. The circles should move diagonally, starting in the upper left corner of the canvas and moving to the lower right, ending in the lower right corner, like this:

circle grow example output

8. Hemisphere

Name this file hemisphere.html. Draw the two black and green hemispheres pictured below. Experiment with the last 3 arguments of the context.arc() function. Recall that its standard form is:

context.arc(x, y, radius, 0, 2 * Math.PI, true)

Argument 1 = x position (pixels)
Argument 2 = y position (pixels)
Argument 3 = radius (distance from center)
Argument 4 = starting angle (0-2π radians)
Argument 5 = ending angle (0-2π radians)
Argument 6 = fill side (which side of circle is colored) : counterclockwise (An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise). source

Your hemisphere should look something like this: