Assignment 05: Interactive Drawing

a simple interactive drawing site

Due Friday, 03/03 Monday, 03/06 by 11:59 pm

Overview

For this assignment, you will make an interactive scalable vector graphics (SVG) panel that allows the user to draw simple shapes. Your site must respond to clicks and mouse movement. At minimum, it should allow the user to draw lines, though you may add more functionality.

Purpose

The main purpose of this of this assignment is for you to get experience working with SVG objects and events in JavaScript. Your site should only include plain HTML, CSS, and JavaScript without including any external libraries or frameworks.

Resources

All of the documentation for the required HTML/CSS/JavaScript can be found on the Mozilla Web Docs site. Specifically, you may find the following documentation helpful:

Note. In order to get the location of the mouse during a click or mousemove event, you can use the fields clientX and clientY (for x- and y-coordinates, respectively). These coordinates will not generally be the same as the SVG coordinates for the element responding to the events. To get the SVG coordinates, you must offset clientX and clientY relative to the upper-left corner of the SVG element. For example, if svg is the name of the SVG panel, you can do this as follows:

1
2
3
4
5
6
7
8

    // svg is an svg element
    const rect = svg.getBoundingClientRect();
    
    // e is an event with a corresponding location:
    //    e.clientX and e.clientY
    // x and y are coordinates of the event with the svg element
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

Specification

Your website must consist of three files:

  • index.html
  • style.css
  • draw.js

All of the files must be plain HTML/CSS/JavaScript (respectively) with no included libraries or frameworks.

  • index.html should contain only contain the basic site structure, headings, and a single svg element that is 600px wide by 400px tall.

  • style.css should contain basic styling of elements including svg elements

  • draw.js should include functions for interactions with the user that result in drawing on the svg panel. At minimum, the panel must respond to click and mouse movement events as depicted in the video above. Other functionality may be included for extra credit (see suggestions below).

Assessment

15 points total

  • 10 points: valid HTML, CSS, and JavaScript submitted
    • valid HTML syntax can be checked with an html validator
    • valid CSS syntax can be checked with a css validator
    • JavaScript loads and executes without issuing any errors or warnings
  • 5 points: functionality
    • SVG panel reacts to click and mousemove drawing lines as illustrated in the video above

Going Farther

Up to 5 points extra credit

  • Add functionality that allows the user to switch to drawing other shapes, for example rectangle, circles, ellipses, polygons, or more general paths.

  • Add functionality that allows the user to change the colors of the elements they draw.

  • Add functionality that allows the user to move elements once they have been drawn.