Page 4: Canvas Drawing: Your Turn

CS559 Spring 2021 Sample Solution - Workbook 2

Written by CS559 course staff

You can try out the example solutions here. The interesting code is on page 4 and page 7.

Now that you’ve learned to draw, you’ll get to draw something!

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

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. If you use an image file, make sure you add it to the GitHub repo!

You should not use the Canvas SVG Path functionality (where you put SVG into Canvas - this is not the same as Canvas path that you should use).

Box (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: This is made using SVG. You don’t need to read the SVG, and in particular, don’t copy the paths. You don’t have to match it exactly, but get the 4 basic shapes and the contrasting stroke around the filled region.

Create the picture using 2D Canvas drawing, by editing the 02-04-01.js file that appears on 02-04-01.html (and shown in the box). The id of the canvas element is canvas1.

If you want to match the colors (not required), they are: circle (fill: #F8E; stroke:#846), triangle (fill:sandybrown; stroke:darkgoldenrod), capsule (style=“stroke:darkred; fill:lightpink”), and sawtooth (stroke:black; fill:gray). The SVG has linewidth 5, if you want to match that (again, not required).

How this would have been graded:
  • (20 pts) 5 pts for each of 4 shapes (20/20)

Create the picture using 2D Canvas drawing, by editing the 02-04-01.js file that appears on 02-04-01.html (and shown in the box). The id of the canvas element is canvas1.

If you want to match the colors (not required), they are: circle (fill: #F8E; stroke:#846), triangle (fill:sandybrown; stroke:darkgoldenrod), capsule (style=“stroke:darkred; fill:lightpink”), and sawtooth (stroke:black; fill:gray). The SVG has linewidth 5, if you want to match that (again, not required).

Box (Exercise) 2: Your own Picture

Make any picture you want to show off how well you’ve learned Canvas. Make it by editing the 02-04-02.js file which is used in 02-04-02.html (and shown in the box). The Canvas element has id “canvas1” 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 bonus points if you make a picture that is particularly creative and shows off that you can use all the Canvas features we discussed.

How this would have been graded:
  • (5 pts) making a picture (5/5)
  • (5 pts) shapes that aren’t rectangles (5/5)
  • (5 pts) transparency (must be obvious from looking at the picture) (5/5 the watermark)
  • (2 bonus pts) artistic merit points for a cool picture (grader’s discretion) (2/2)

Now you can go on to Page 5.

Page Rubric
  • (Box: 02-04-01) (20 pts) 5 pts for each of 4 shapes
  • (Box: 02-04-02) (5 pts) making a picture
  • (Box: 02-04-02) (5 pts) shapes that aren’t rectangles
  • (Box: 02-04-02) (5 pts) transparency (must be obvious from looking at the picture)
  • (Box: 02-04-02) (2 bonus pts) artistic merit points for a cool picture (grader’s discretion)