Let's Draw

A free, open-source drawing program feat. HTML Canvas, localStorage 🎨
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Tech Stack
2. Getting Started
   • Prerequisites
   • Installation
3. Implementation
4. Features
5. Contributing
6. License
7. Contact
8. References

🙋 About The Project

Let's Draw is a free picture editing/drawing program inspired by MS Paint. Its goal is to provide users with a simple but robust MS Paint alternative with the ability to draw and manipulate pictures on Linux, Mac, and Windows. The program offers a decent basic toolset for creating drawings.

The program enables the user to draw with their free hand on a blank canvas or on a picture in a color of their choice, with plenty of different brush sizes. It supports all major functions, such as coloring, picture editing, special effects, Ps layers, and so on.

You can take advantage of advanced capabilities, like saving your work in browser's localStorage so that even if you leave the application, still your data remains safe, download your work in form of jpeg image. 🔥

(back to top)

🛠 Built With

• 
• 
• 

(back to top)

🚀 Getting Started

This is an example of how you may start on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Live Server Extension

Installation

1. First of all install Live Server extension by Ritwick Dey.
2. Once the extension was installed, then right-click on index.html and select Open with Live Server.
3. It'll open a new tab in browser & start serving the Paint App. Enjoy!.

(back to top)

🏗️ Implementation

• First of all, we need to gather all functional requirements of a paint type application. A paint application can be broken down into five components: brush, color picker, eraser, options to save your work, and most important the canvas itself.

• Then break the UI into small Ui Components & start building indivisual components.

Ui Components:

1. Custom Slider, JSColor, Mobile Message

   • First of all, we created a navbar of height 50px which take 100% of width of the viewport. Then placed all necessary fontawesome icons inside it and styled them accordingly.
   • Next, our color picker slider looks so ugly, so customized it.
   • Also the color picker for brush, canvas background doesn't look well on all operating systems. So it needs to customised. In this case, I'm using 3rd party library called jscolor. I modified some code in the jscolor.js file of that library & styled the input elements as it needs to be.
   • This application is not compatible to work on any mobile devices. So it shows a warning message to user to use larger screen.
2. Canvas API

   • First of all, we need to setup our canvas in javascript. In order to do that, create a canvas element and then call getContent() with param `2d` on it to get Canvas Context which allows us to work with the canvas.
   • In JavaScript, I set the `width`, `height` of canvas to window.innerWidth, window.innerHeight - 50 (as 50px is the height of the toolbar at top).
   • To change background color, it listenes for `change` event to get the new value & then re-create the canvas again.
   • Now for the brush, it listenes for `change` event on the input element of type `range` .i.e. on custom slider to get the user's choosen size of the brush. Also the color for brush is stored in global var so that it can be used on other places as well.
   • Last one is eraser, an erase is nothing just a brush with the same color of the background.
3. Drawing on Canvas

   • Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y).
   • Drawing paths: Now let's look at paths. A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. To make shapes using paths, we take some extra steps:
   • 1. First, you create the path.
   • 2. Then you use drawing commands to draw into the path
   • 3. Once the path has been created, you can stroke or fill the path to render it.
   • The brush will listen for 'MouseEvent' on the canvas element. Then the drawing will happen when 'onmousemove' event occus along with between 'onmousedown' and 'onmouseup' events.
4. Storing, Fetching drawing data from localStorage

   • On the fire of 'onmousemove' event, we store the coordinate of current position in (x, y) form, current brush size, current brush color and current brush type like whether it's a brush or an eraser!.
   • It stores all the above said informations in a global array. This allows to repaint the canvas automatically, otherwise on the change of background color, all the drawings get lost.
   • Now on the click on `arrow-down` icon, it saves that global array into localStorage.
   • Similarly, on the click on `arrow-up` icon, it fetches that global array from localStorage and re-constructs the canvas again.
   • Last but not least, to download user's drawing, on click on `download` icon, it makes canvas to a DataURL by calling toDataURL on canvas with type 'image/jpeg' and jpeg quality to '1.0' .i.e. full quality.

For more information, visit necessary reference Link

(back to top)

💎 Features

• Simple & Clean UI: The setup provides very simple & clean UI which involves all the minimal necessary tools a user needs to start painting, no other unnecessary tools included that makes the UI difficult to use.
• Fast: This application is built with vanilla JavaScript, no such heavy lifting framework or library like React, Angular involved. This makes Ui very fast in term of performance.
• Local Storage: The setup uses browser's Local Storage to store or fetch your work. Since there is no database server involved, the process of saving user's work or loading back his previous work from localStorage is very fast.

See the open issues for a full list of proposed features (and known issues).

(back to top)

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

📜 License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

📮 Contact

Prasenjit Sutradhar - @twitter_handle - [email protected]

Project Link: https://github.com/Prasenjit-3433/Lets-Draw

(back to top)

✌️ References

• Fontawesome Icons
• w3schools - How TO Range Sliders
• jscolor - Custom Color Picker
• MDN - Canvas API
• MDN - Drawing Shapes
• MDN - Canvas to DataURL

(back to top)