Drawing App - JavaScript With Source Code

Drawing App - JavaScript with Source Code

About This Project

The Drawing App is a simple web application built using JavaScript that allows users to draw and doodle on a canvas. Users can choose different colors, adjust the line thickness, and erase any mistakes easily. This documentation provides a brief overview of the app's features, dependencies, and how to use it.


  • Color Picker: Users can select the desired drawing color by using the color picker.
  • Line Thickness: The app provides a slider to adjust the line thickness, allowing users to create thin or thick strokes.
  • Drawing: To draw, simply click and drag the mouse on the canvas. The chosen color and line thickness will be applied to the strokes.
  • Erase: Clicking the "Erase" button allows users to erase specific parts of the drawing by drawing over them with the background color.
  • Save: The "Save" button enables users to save their masterpiece as an image file to their local device.
  • Reset: To start over, clicking the "Reset" button will clear the canvas, allowing users to create a new drawing.


The Drawing App relies on the following libraries to function:

  • jQuery - v1.12.4
  • jQuery UI - v1.12.1 (South Street theme)

These libraries are fetched from public CDNs, ensuring efficient loading and better user experience.

How to Use

  1. Select Color: Use the color picker to choose the color you want to draw with.
  2. Adjust Line Thickness: Move the slider to set the desired line thickness for your strokes.
  3. Draw: Click and hold the mouse button while moving it on the canvas to draw. Your selected color and line thickness will be applied to the strokes.
  4. Erase: To erase parts of your drawing, click the "Erase" button and then draw over the areas you want to remove. The background color will be applied to the strokes.
  5. Save: Click the "Save" button to download your drawing as an image file. It will be saved on your local device.
  6. Reset: To start over, click the "Reset" button. This will clear the canvas, allowing you to create a new drawing from scratch.