Sample form with canvas

ICT-4570 Homework 5


In this assignment you will have the opportunity to explore the use of the HTML5 canvas and event handling in JavaScript to provide an interactive experience to users

What to Hand In

Canvas submission instructions:
Please combine multiple files into a single "zip" archive, and save it in a location that you will remember. When you are ready to submit the assignment solution, open the assignment in Canvas, and click on the Submit for Evaluation button at the top, attach the file, and click Submit for Evaluation at the bottom.


  1. Consider assignment 2, where you provide a form to collect a rectangle's width and height, and provide its perimeter and area. This assignment has similar requirements, except that the user will use the mouse to draw a rectangle on a canvas placed on the page, and the width, height, area, and perimeter will be extracted from the location of the user's action.
    1. A left mouse click will begin drawing the rectangle, the user will drag out the rectangle, and releasing the mouse will establish the final size of the rectangle.
    2. The current width and height of the rectangle should be fed back to the user while the mouse button is depressed. There are several ways to do this, including filling in the form values.
    3. If you provide feedback to the user through a popup or other mechanism, you may defer filling in the form until the user has released the mouse.
    4. Conversely, if the user fills out the form and presses submit, draw a rectangle on the canvas from 0,0 to the extent provided by the user.
    5. Canvas coordinates supported should be at least 500 by 500.
    6. You should ensure your form input does not accept sizes bigger than your canvas, or less than or equal to zero.
    7. You may choose the line and file of the rectangle to your own liking, so long as they are visible.
  2. Provide a short paragraph describing your experience with this exercise.
    What, if anything, made it difficult?
    What, if anything, could have made this easier to accomplish?
    The paragraph may be submitted as a separate text document, or may be included in your code comments.



Criteria Weight
HTML page, including a form and a canvas 15%
Form validation for width and height 15%
Form drawing of rectangle upon submit 15%
Canvas drawing of updating rectangle 15%
Canvas updating of width and height 15%
Updating of form after mouse release 15%
A cogent and concise paragraph summarizing your experience with this exercise 10%