Page 19: Canvas Drawing: Your Turn

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

Below, there are two “box” 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.

But First, a little practice.

Canvas Practice

Read the programs and guess what it will draw. Then press and see.

These are good practice for the quizzes: we often have questions that ask you to figure out what a program will draw.

1
2
3
4
5
6
7

ctx.lineWidth=7;
ctx.arc(100,100,50,Math.PI,0);
ctx.fillStyle="#888";
ctx.arc(250,100,50,Math.PI,0);
ctx.strokeStyle="#00F";
ctx.stroke();
ctx.fill();

Slightly different…

1
2
3
4
5
6
7

ctx.lineWidth=7;
ctx.arc(100,100,50,0,Math.PI);
ctx.fillStyle="#888";
ctx.arc(250,100,50,0,Math.PI);
ctx.strokeStyle="#00F";
ctx.stroke();
ctx.fill();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

ctx.lineWidth=9;
ctx.strokeStyle="#00F";
ctx.fillStyle="#F00";
ctx.moveTo(50,150);
ctx.lineTo(100,50);
ctx.lineTo(150,150);
ctx.stroke();
ctx.lineTo(200,50);
ctx.lineTo(250,150);
ctx.strokeStyle="#0F0";
ctx.stroke();
ctx.fillStyle="#080";
ctx.lineTo(300,50);
ctx.lineTo(350,150);
ctx.fill();

Re-write the first program so that the bottom halves of the circles are drawn instead.

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 01-19-01.js file that appears on 01-19-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 01-19-02.js file which is used in 01-19-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. You can see a few good examples from the 2023 Canvas Pictures Gallery or 2024 Canvas Pictures Gallery galleries.

Now you can go on to Next: Page  20 - Animation and Interaction with SVG and Canvas.