Page 22: Try Canvas Programming

Spring 2026 Sample Solution

This page has one simple programming exercise. The next page has a more difficult exercise, and the opportunity for advanced items.

You should do this exercise by editing the file 01-22-01.js .

Box 1: Canvas Event Programming

In the Canvas element box (with id box1canvas), please implement the following behavior:

  1. When the user clicks in the element, a circle appears under the mouse. Circles get added, so the user can make lots of circles. When I say circle, I mean a filled in circle (mathematically, this is a disc).

  2. If a circle is under the mouse, it changes color. The circle changes color back to its original color when the mouse leaves. When the circle first appears, it might have the “under the mouse color” or the “not under the mouse” color. While a newly created circle is under the mouse, a new circle might not notice that it is under the mouse until after the mouse moves over it. Either way is OK.

  3. (advanced) If you click on a circle, it changes its color, but it still must be affected by mouse over. Note: this means that if a click is over a circle, you do not make a new circle (#1).

If you do parts 1 and 2 (which everyone should do), (these colors are examples): when you click, a green circle appears; when the mouse enters a green circle, it changes to yellow, when it leaves the yellow circle it changes back to green. In part 3, if you click on a yellow circle (if you try to click on a green circle, it would change to yellow when you enter), it may change to red. The red circle would change to orange (or yellow) when the mouse enters it, but would change back to red, not green, when the mouse leaves. Of course, you need to let the user make lots of circles - and they should all work correctly.

All of your code for this exercise should go into the file 01-22-01.js . You should not need to change 01-22-01.html We’ve started things for you. You should use the canvas API to draw, not SVG.

Hints
  • The examples on Page  21  (Interactive 2D Scenes) should give you lots of ideas. Those did rectangles, not circles. But a lot of other things are the same.
  • You will need to keep a list of circles, so you can check if the mouse is inside of them.
  • You can do this in a purely event driven style (using onclick and onmousemove) or with an animation loop.
  • You can make the circles all the same size (pick a radius - like 10 pixels).
  • You can decide if the mouse is over a circle by checking to see if the distance between the mouse and the center of the circle is less than the circle’s radius.
  • Making the behavior correct at the edge of the box is hard, since you may not get mousemove events when the mouse is outside the box. Don’t worry if the mouse behavior isn’t correct outside of the canvas.
  • Get part 1 to work first (making circles on click). Then get part 2 to work.
  • Getting the mouse position relative to the element requires knowing where the element is. Read the example code on Page  19  (Canvas Drawing: Your Turn) to see a way to do this.
01-22-01   rubric Kinds of boxes:
view - look at the box and experiment with it
examine - look at the code for the box
edit - change the box's content
rubric - several steps are suggested in the rubric page - form elements on page in rubric
   01-22-01.html   01-22-01.js
Kind Kind of rubric items:
standard - expected from all students
advanced - used to get a better grade
creative - an opportunity to do something creative
levels - rubric item graded by selected achievement level
optional - not required, but encouraged 		Description
standard circles appear at mouse click
standard circles change change color when mouse is over them
standard circles change back when mouse leaves
advanced circle changes color when clicked, hover still works

That’s all for this page. Next: Page  23 - Fireworks