Dev Draw
Table of Contents
- Built With
- Built-in tools
- Upcoming tools
- Features
- What was learned
- Optimizations
- Node Dependencies
- Prerequisities
Built With
- Node.js
- Html
- CSS
- Javascript
Built-in tools
marker--- draw markerslineWidth--- set line widthcolorsPicker--- background and foreground colors pickerundo--- undo recent shapesclear--- clears entire canvas drawing
Upcoming tools
- Allow users to screenshot their images and automatically save onto their computer
- Implement additional toolbar features (arrows, shapes, pencil,lines).
Features
- Draw single or multiple strokes of any kind (according to toolbox)
- Resize line-width to the user's preference
- Undo drawings at the click of a button, with our built in feature
- Clear the entire canvas at the click of a button, with our built in feature
- A color wheel with 100's of shades to create the most coloful drawings
- Built-in mobile responsive feature that allows you to draw from any phone screen
What was learned
- With this project, you are able to create your own art through a collaborative canvas with numerous features. Through the use of javascript, node.js, html and css, we were able to bring this canvas to life and as simple as possible for users to use.
Optimizations
- Adding media queries to enhance the application's responsive web design on the homepage
- Implementing new toolbar features to facilitate a variety of drawing techniques
- Adding a save button that allows users to save their drawings to their devices
- Including image urls where users can grab their image embedded code
- Using browser developer tools that help to debug browser compatability tests