Homework 3: Graphics using SVG and Canvas

Assigned: 9/27/2022; Due 10/11/2022 at 3:05pm 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.

Make sure you don't disturb the HW2 files on Github while you are working on Homework 3, since we will need to access HW2 to grade it.

You will download a new project for Homework 3 from Github, like for homeworks 1 & 2 -- the exact location is on Canvas in the instructions for Assignment 3. The editor you are creating is to be available from the CREATE YOUR OWN link in the header of the homework 1 web pages, but you do not need to link it from there unless you want to. 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 should plan to take the full two full 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.

You will download the homework 3 project from Github will contain the following starter files:

In addition, we have supplied the following for your reference:

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


Since this homework has lots of parts, some students may want to know what each part is worth. Here is a summary breakdown: total = 100 points:

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 10/11/2022 at 3:05pm ET.