Page 7: Try Canvas Programming

CS559 Spring 2023 Sample Solution

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

You should do this exercise by editing the file 02-07-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 - more work for less points) 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 02-07-01.js. You should not need to change 02-07-01.html We’ve started things for you. You should use the canvas API to draw, not SVG.

Hints
  • The examples on Page  6  (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  4  (Canvas Drawing: Your Turn) to see a way to do this.
Box 02-07-01 Rubric (11 points total)
Points (10):
Box 02-07-01
4 pt
making circles appear when the mouse is clicked
Box 02-07-01
3 pt
having the circles change color when the mouse is over them
Box 02-07-01
3 pt
having the circles change their color back when the mouse leaves them
Advanced points (1):
Box 02-07-01
1 pt
having the circle change color when clicked (advanced points), with the hover behavior still working

That’s all for this page. Next: Fireworks