Workbook 2, page 3: Canvas Drawing: Your Turn

Now that you've learned to draw, draw something!

There are two exercises - you must make a picture for each. In the first one, you have to make the picture I ask for. In the second one, you can make anything you want.

You should do these exercises by editing the file "A02_p3.js", we've actually started things for you. specifically, your code for exercise 1 should go into the function wb2_pg3_ex1, and your code for exercise 2 should go into the function wb2_pg3_ex2. Please put all of your code inside of these functions!

You do not need to use Canvas concepts that we haven't learned about yet (transformations or curves). You can use images or text if you want (even though we won't learn about them in class). If you use an image file, make sure you add it to the GitHub repo!

You should not use the Canvas SVG Path functionality.

Exercise 1: A Simple Picture

Make a picture that contains:

  1. a circle
  2. a triangle
  3. a capsule (half circles connected by straight lines
  4. a sawtooth / mountain (two triangles sticking out of a rectangle

For each, have a solid line border and a filled color.

Try to make it look like this example. Note: I made this example using SVG. Do not try to read the SVG (and in particular, don't copy the paths). You don't have to match what I did exactly, but get the 4 basic shapes. And do it in Canvas, by editing the wb2_pg3_ex1 function in the A02_p3.js file.

Put your picture in this Canvas element (it's id is "canvas1" and it is 400x200).

Exercise 2: Your own Picture

Make any picture you want to show off how well you've learned Canvas. Make it by editing the wb2_pg3_ex2 function in the A02_p3.js file. The Canvas element has id "canvas2" and size 500x500.

You can draw anything you want. But please show off that you know how to: use styles, use transparency, use drawing order, and use complicated shapes. The grader will check that Canvas has some of those things.

Also, you must "color in the lines" - don't change the HTML file (the canvas is 500x500). And, just make a static picture - no interaction or animation. We'll learn about that on the next page. This is not the end of this workbook - be sure to go on to the other pages when you're done.

There is a chance for a bonus point if you make a picture that is particularly cool and shows off that you can use all the Canvas features we discussed.

Now you can go on to page 4