Doodle Board 🎨

Unleash Your Creativity, One Stroke at a Time!
Go to App »

Raise a PR · Report Bug · Request Feature

Doodle Board is an interactive drawing platform built entirely with JavaScript. This project offers a versatile set of tools and features for users to express their creativity. Whether you want to sketch freely, annotate images, or add shapes and text, Doodle Board has got you covered. Unleash your creativity with Doodle Board! 🚀🎨 Express yourself freely and bring your ideas to life!

Demo

mainn.mp4

Key Features

• Pencil & Marker: Allows freehand drawing with adjustable size, color, edges, and patterns (solid, dashed, dotted).
• Eraser: Enables erasing drawn content with an adjustable size.
• Shapes: Offers various shapes like square, circle, diamond, rectangle, and triangle for drawing.
• Text: Allows users to add text with options for size and font family, along with draggable, resizable, and delete functionalities.
• Sticky Note: Provides colorful sticky notes for annotations, draggable and resizable, with options to minimize or remove.
• Upload: Enables users to upload images for annotation, which are draggable and resizable, with options to minimize or remove.
• Background Color: Offers options to change the background color of the canvas.
• Reset: Provides functionality to reset the canvas quickly.
• Undo/Redo: Supports undo and redo actions for drawing.
• Download: Allows users to download the content image.

More features to come! 😍😇

Technologies Used

• JavaScript
• HTML5 Canvas
• CSS

TODO Features

• marker ( change width, colors, 3 types of style, 2 types edges )
• highlighter ( change width, colors, 3 types of style, 2 types edges )
• Write text (with markdown)
• Add markdown on sticky notes
• Create shapes: square, circle, rectangle, diamond, triangle, downward pointing triangle, rounded rectangle (filled & outline)
• Straight line & Arrow
• panning tool
• stamp feature
• add comment features
• add layers
• change canvas color
• add typescript
• live collaboration
• change the mouse type based on pencil, eraser or marker

Blogs to be written based on my learnings

• How to perform drag and drop in Javascript? (w/ trello dashboard UI)
• How to perform drag and drop (with resize) in Javascript?
• How to draw shapes based on mouse events in Canvas?
• Pen & Eraser Tool in HTML5 Canvas

Installation

No installation is required. Simply open the project in a web browser to start drawing!

Contributing

I welcome contributions from the community to improve Doodle Board. If you find a bug or have an idea for a new feature, feel free to create an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments

I extend my gratitude to the developers of the open-source libraries used in this project, as they have contributed significantly to its success.

Contact

If you have any questions or suggestions, please feel free to reach out to us at [email protected].