- I started with trying to upload an image and put it on the canvas.
- Tried to resize/scale/align to center of the canvas
- Find a way to save the image and its coordinates by using JSON objects
- Then experimented on how to create a rectangle based on various coordinates with the use of mouse events and variables
- Check out the mouse events to trigger the input field while inside the circle
- Find a way to save the values in the local storage and trigger the events to refresh the data
- Use buttons to traverse to the different photos using events
- For the gallery, resize the images to be a thumbnail and use of events to trigger the traversal and access of the data.
- dragging text collison
- dragging the rectangle from lower right to upper left causes the input field to be out of the box
- Unable to drag a rectangle on mobile
- Unable to support 2 running tabs/pages as of the moment due to localstorage events clashing with each page
- Only for modern browsers (Tested on Chrome)
- Fixed text font and color
- Resized images based on canvas resolution
- Has not been fully tested yet on mobile phones with varying resoltions and browsers
- Choice of options for text and border colors
- CSS Styling
- Collision detection needs improvement
- Move the javascript files out and refactor for modules
- Move CSS to a separate file.
- Make the code cleaner by using convenience methods (JQuery, lodash, etc.)
- Reduce repetitive code by using functions
- Modifiable font size per tag
- Add coloring for new tags and borders
- Add button colors
- Add highlighted images
- Change Photo to Image
- Add font-awesome icons
- Change title font sizes
- Set canvas to center