aryandutt / drawsome

Infinite canvas for creative expression with versatile drawing tools

Drawsome 🎨

Welcome to Drawsome! 🚀

Drawsome is a web application that lets you unleash your creativity by drawing various shapes, lines, and freehand sketches on an infinite canvas. Similar to Excalidraw, Drawsome offers a range of tools and features to make your drawing experience smooth and enjoyable.

Features

🖊️ Drawing Tools: Draw lines, rectangles, ellipses, circles, and freehand sketches effortlessly.

🔍 Panning and Selection: Use the panning tool to navigate the canvas and the selection tool to relocate and manipulate your drawings.

🧽 Eraser: Easily erase any part of your drawings with the eraser tool.

⏪⏩ Undo/Redo: Made a mistake? No worries! Drawsome supports undo and redo functionality to correct errors.

🔧 Customization: Customize properties such as stroke color, fill color, fill type, roughness, and more for each drawing tool.

⌨️ Shortcuts: Increase your productivity with handy shortcuts for all the tools. Simply hover over a tool to view its shortcut via a tooltip.

📝 LocalStorage: Your drawings are automatically saved in the browser's localStorage, so you can access them even after reloading or closing the tab.

🛠️ Technologies Used

• React: Framework for UI.
• TypeScript: For type safety.
• RoughJS: Rendering shapes.
• perfect-freehand: Freehand pen strokes.
• flatted: Efficient data storage.
• Tailwind CSS: Styling.

Getting Started

To get started with Drawsome, simply clone the repository and follow the instructions in the README to set up the project on your local machine.

git clone https://github.com/aryandutt/drawsome.git
cd drawsome
npm install
npm run dev

Deployment

You can access Drawsome online at Drawsome.

Feedback

We're constantly working to improve Drawsome and would love to hear your feedback! Feel free to reach out to us with any suggestions, bug reports, or feature requests.

Contributors

• Aryan Dutt (@aryandutt)
• Harsh Pant (@harsh11101)

Let your creativity flow with Drawsome! 🎉

drawsome's Issues

Implement zoom functionality

Feature :

• Add zoom in and zoom out feature.

Discussion :

• @aryandutt I believe the functionality of zoom in, zoom out and drag I was talking about should work similarly when we implement the zoom.

Screen.Recording.2024-04-13.at.12.40.11.PM.mov

mobile darwing issue

why i cannot draw in mobile view ?

Export Option

Description:

Currently, Drawsome lacks the ability for users to export their creations directly from the application. This feature request aims to address this limitation by providing users with the option to export their drawings in various file formats.

Proposed Functionality:

• Implement a new menu or dialog box within Drawsome specifically for exporting drawings.
• Offer a range of commonly used file formats for export, such as PNG, JPEG, SVG, and PDF.
• Allow users to customize export settings, such as resolution and compression level, where applicable. (optional)
• Provide clear and intuitive guidance for users on how to access and use the export functionality.

Benefits:

• Empowers users to save and share their creations in formats suitable for their intended use
• Enhances the overall usability and utility of Drawsome, making it a more versatile tool for artists and designers.

[Feature Enhancement] Pen tool is not smooth

The pen tool is currently not very fluent and breaks at the tip when used with vigorous mouse movements.

How it works now -

• Collects the coordinates of points the cursor is going over
• Converts these points to an SVG path
• Displays the path on the screen and appends it as a child

Issues on window resize

2 issues I've found when I resize the window

• When you draw on the board, the points are offset by a certain amount
• The whole diagram tries to squeeze in the available viewport, resizing should not affect the drawing

Taking on this issue myself after discussion with @aryandutt

[Feature Request] Shape Resize

Shapes should be dynamic and the user should be able to resize the shape when on the pointer tool after it's been drawn.

Text tool

A text tool needs to be added to the toolbar which allows users to type on the canvas.

Implement Mouse Pointer Changes for Drawing Tools

New Feature Request:

Change the mouse pointer dynamically to reflect the selected drawing tool.

1. Eraser tool selected: Pointer changes to eraser tool shape.
2. Pen tool selected: Pointer changes to pen tool shape.

@aryandutt I'd like to implement the mouse pointer changes for the drawing tools as discussed.

Shape edges are not smooth

[Code Refactor] Tests Required

We need tests to make this project easier to maintain and contribute to.