This is the ability to use the HTML5 tag with the canvas and JavaScript to be able to draw and gain accessibility to the canvas using mathematical functions in JavaScript. We are drawing rectangles and calculating both the area and perimeter of these functions. I also have incorporated the proper touch events needed.
For me, this exercise was quite interesting. It was the first interactive application that involved physically being able to draw and create elements on the page using JavaScript for me. Due to the fact that I have not learned many other programming languages other than HTML and CSS before this, it was interesting to see how you can create many different methods, which each had different tasks, and then call them in the main method. In this case, my main method was called init(). I also had never formally had worked with the canvas element which is located in HTML5 before.
After doing some research, I've realized that there are many different libraries out there such as jQuery and p5/processing can make interacting with the canvas a lot easier. Many of these libraries have shorter written functions and can create/interact with the canvas with their own written methods and event handler functions. This will be extremely helpful and shortening your code in understanding the canvas better, however, I do find it important to know how to code with vanilla JavaScript before interacting with any of these specific JavaScript libraries. All in all, this project was extremely interesting and show me how Web pages can be way more interactive other than just using standard styling and markup.
P.S. I also incorporated the touch events for mobile devices and also uses the SASS pre-processor for CSS.
***Updated All Forms and Rectangle Output and the color of the form drawn rectangle updates to red vs yellow with the mouse click events
https://github.com/ericzorn93/Canvas-with-JS
Updated at 2:34pm EST on July 29, 2017
Author, Eric Zorn