This is my implementation of 2D graphics primitives
Click HERE to take a look.

• Basic Shapes
  • All the numbers displayed on the timer where drawn onto the canvas to meet this requirement.
  • I've decided to implement a digital timer, allowing me to experiment with the polygraphic
    design of each digit.
  • As for Arcs I've decided to implement 2 arcs growing in length as the timer increases.
    • The top arc represents elapsed minutes.
    • The bottom arc represents elapsed seconds.
• Rendered Text
  • The current date is rendered as test on the top left of the canvas.
• Image render
  • I've Decided to render an image of a clock, to match the theme of a timer program
• Loops, Interactivity, Animation
  • In my implementation, all there are inter-connected.
  • First for interactivity, there is a start timer button.
  • Once the button is clicked, Ive add a loop to update the
    current elapsed time.
  • Lastly for the animation, after the elapsed time is updated
    we must also update the UI to reflect this change. Once the UI
    is updated, this creates a digital animation.

• User clicks the Start Timer, the only button on screen.
• This will trigger a state change and cause a loop to begin.
• In the loop:
  • Check if the user has clicked Stop Timer
    • If so break loop.
  • We increment the elapsed seconds.
  • Update the UI.

• If the user refreshes the page, the loaded image is lost from the DOM.
  • This was due to the .hidden css property previously applied.
• To handle this I:
  • Alter the html content to remove .hidden css style when the page
    is refreshed.
  • Re-draw the canvas image after the page has reloaded.
• I was under the impression that HTML, CSS, and JavaScript where the only
  way to add graphics to a UI on the web. Seeing the canvas DOM element definately
  makes me rethink web graphics.
• I also dindn't realize how interconnected math and computer graphics were. This
  assignment required me to refresh some of my algebra, and knowledge of the cartesian
  plane.
• Desmos was really helpful in helping me visualize points on a cartesian plane, with a small
  caviot of inversing the y valuse of each point.

• Icons:
  • Document icons created by Freepik Flaticon
• Clock Image:
  • Licensed from Adobe Stock