Page 4: Canvas Drawing: Your Turn

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).

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. You should use the canvas API, not SVG. 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.

Yes, you can make a simple picture. But, you will learn more and have more fun if you try to make something creative. We will not reward you with extra points, however, there might be other rewards. We will select some interesting pictures for the gallery (you can see a few examples from the Galleries ).

Now you can go on to Page 5.