Part 1: Add the Form Elements

Open the file sketch.html for editing. Find the div that contains the headline <h3>Controls</h3>. You should add the form elements to that div, after the headline. Use <p> and <br> to space the elements out nicely, and add labels to make the meaning of each element clear. The picture below shows what the page will look like with the controls. You should follow this model pretty closely. For this lab, you should not be creative.

Here is what you need to add:

• A <select> element to control the color that will be used for drawing. Each <option> should represent a possible drawing color, and its value should be a legal CSS color name or code.
• A <select> element to control the line width that will be used for drawing. The value of each <option> should be a number.
• A checkbox that controls whether or not the drawing will be symmetric.
• A button that the user can click to clear the canvas.
• A set of radio buttons that says what color will be used to clear the canvas. Each radio button represents a color. The clear button is to be implemented by filling the canvas with the color specified by the selected item in the radio group.

The selection of colors and line widths is up to you. Here are some things to keep in mind.

• The elements will need id's so that you can refer to them in JavaScript and get their values.
• The value for an <option> is the text in the option, unless you add a value attribute. For example, if you want to describe your line widths by words instead of numbers, then you can put the numbers in value attributes: <option value="10">Very Wide</option>.
• If you want a checkbox or radio button to be selected at the beginning, you can add a checked attribute to the element. This attribute doesn't need a value. For example: <input type="checkbox" checked>.
• Each of the radio buttons in a group must have a name attribute, and the value for name has to be the same for all the buttons in the group.

Part 2: Apply Color and Line Width

Once you have the controls on the page, you want to apply them to the user's drawing. First, you can set the drawing color and line width. Note that changing the setting of one of the <select> items has no immediate visible effect in this program. The changed setting won't be used until the user draws something.

The place to set the color and line width is in doMouseDown, just as the user starts drawing a curve. You just have to assign values to the variables graphics.strokeStyle and graphics.lineWidth. The values that you need come from the <select> elements.

Part 3: Clearing the Canvas

When the user clicks the Clear button, you should draw a rectangle to fill the canvas with the selected clear color. You will need to define a function to do that. Recall that you can test whether a radio button is selected by checking whether the value of its checked property is true.

Part 4: Implement Symmetry

Finally, you should implement the symmetry feature. Symmetry is attractive, and the ability to make perfectly symmetric pictures adds some interest to the program. Furthermore, it's not hard to do. To get symmetry, each time you stroke a line, you should also stroke the three "symmetric" lines that are obtained by reflecting the original line horizontally and vertically. This picture shows how to get the coordinates that you need for the reflected lines. If (x,y) are the coordinates for the original point, then the coordinates for the three reflected points are as shown, assuming that the canvas is 600-by-600.

You should draw the extra, symmetric lines only when the symmetry checkbox is checked. When the box is not checked, you should just draw the original line. As with radio buttons, you can test whether a checkbox is checked by looking at the value of its checked property.