Dev Draw

 

Draw what your heart desires with this full stack application.

Link to project

Table of Contents

1. Built With
2. Built-in tools
3. Upcoming tools
4. Features
5. What was learned
6. Optimizations
7. Node Dependencies
8. Prerequisities

Built With

• Node.js
• Html
• CSS
• Javascript

Built-in tools

• marker --- draw markers
• lineWidth --- set line width
• colorsPicker --- background and foreground colors picker
• undo --- undo recent shapes
• clear --- 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

Prerequisites

Install node.js

Steps to install [node](https://nodejs.org/en/) -