Description
Synopsis: You need to create a program that draws a picture on a 2D Canvas on a Web page. Your submission must demonstrate the use of lines and polygons, and the use of slider elements for input.
Learning Objectives: To make sure everyone understands how to make pictures with Canvas, using the most basic features that we reviewed in class. We also want to make sure that you can turn in assignments, and that you know how to create an HTML page with JavaScript (as a stand-alone file or files; not within a pastebin like JSbin).
Evaluation: Based on our 4-point grading scheme, as discussed in our introductory lecture. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades (i.e. a “4”) will be awarded for people who have crafted something particularly cool. As a general rule, no more than 1/3 of all assignments turned in (the very best ones, that is) will be considered for a “4” grade.0
the assignment is not the intent, if you haven’t added any of your own effort to it). If you use somebody else’s code (other than our GitHub examples), make sure to clarify in your submission notes what you did, and what you repurposed from the external source.0
Hand-in: Electronic turn-in on Canvas. Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but even preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository 
(https://github.com/sifakis/CS559F22_Demos) (see, e.g. Demos 0-2 from Week 2). If you submit anything else than a single HTML file, please put everything in a single ZIP archive. It is not acceptable to submit a link to JSbin for this assignment! For this assignment, we discourage you from using any libraries. But if you do use a library, make clear to mention it in the comment box.
Description
In our recent lecture (in particular, on September 8th) we saw a few introductory examples of using the HTML5 canvas for simple drawing in 2D. Those include a simple demonstration of creating a canvas element and drawing a single colored line [JSbin link] (https://jsbin.com/bovuhok) , a demonstration of the use of function calls, and filled
polygons [JSbin link] 
(https://jsbin.com/suhujar) , and an introduction to the use of sliders as input elements along with their associated callback mechanisms [JSbin link] (https://jsbin.com/fesukexori) . Incidentally, you can find these same examples in our GitHub repository 
(https://github.com/sifakis/CS559F22_Demos) (under the subdirectory Week2/; look for the subdirectories Demo0, …, Demo2 under it) more properly written as .html files and .js files containing the HTML/JavaScript code respectively.
The goal of this assignment is to have you figure out the programming aspects of drawing pictures on web pages using the JavaScript 2D Canvas library. You should create a new program (as a single HTML file, or even better a separate .html file and a .js file with the JavaScript code, as exemplified in the demos from the GitHub repository) that includes – at minimum – the following visual elements:
You should draw at least one filled shape (e.g. a polygon).
You should either have multiple, separate filled shapes (not merely identical copies of one another; craft a different shape instead), or draw some shapes that are not
filled alongside the filled polygons, for example polygonal shapes that are only drawn as
