This is an old version of the class. Please see the 2021 version instead.

Homework 3: Graphics using SVG and Canvas

Assigned: 9/22/2020; Due 10/6/2020 at 1:30pm ET


In this assignment, you will be creating a simple editor for graphics. The complication is that it must support both graphics using SVG objects ("drawing") and graphics using a canvas ("painting"). Since these are not particularly compatible, they will be on different layers, that the user can individually turn on and off, so the user will only see and edit on one layer at a time. This is supposed to mimic (to a tiny extent) a hybrid editor like Adobe Photoshop. You should leave the HW2 code in its current folder, but you will have a new HW3 folder in which you put this homework's content, and you can now have the CREATE YOUR OWN link on the web pages go to the new homework 3 code instead (that is, it is fine if one can no longer reach the HW2 code by clicking on links). Hopefully, your code from homework 2 will be useful in implementing the behaviors for homework 3.

As with the previous two homeworks, you must implement homework 3 without using external packages - just regular JavaScript (and html and css), including what you have written for previous assignments.

We feel this homework is a little harder than the previous ones, so you have two weeks to finish it.


We are giving you the file floodfill.js that provides one implementation of floodfill so you don't have to figure that out.

Don't forget the SSUI-hw2-3hints.pptx file that is available in the Files area on Canvas, that is discussed in the SSUI-08-toolkits-zoom.mp4 video.

You will download the file which will contain the following starter files:

In addition, we have supplied the following for your reference, also in the zip file:

drawing new line drawing new line example full screen
rectangle selected line selected

Detailed Requirements

We have supplied screen shots and a movie to define the required behaviors. As with homework 1, you don't have to be "pixel perfect", but you should have the all operations pretty much looking and behaving in the same way as this specification. If something is unclear about how it should work, or you want to deviate from the defined behavior, you might want to first ask on Piazza.

Extra Credit

Turn In

Please have a README file in your subfolder (as in hw2), which can be in plain text, Microsoft Word, or pdf format, which should contain:

Please upload this README file to Canvas by 1:30pm on 10/6/2020, in addition to having the file in your subfolder.