yashchaudhari008/drawit

DrawIt! - A Simple Drawing App

✏ DrawIt!

DrawIt is a Simple Drawing App made using HTML, CSS, JS and p5.js.

Make sure to ⭐ the repo.

🖥 Deployed App

App is live on GitHub Pages and is available at https://yashchaudhari008.github.io/drawit/.

🏃‍♀️ Runnning Locally

• You can directly open index.html to run it locally.
• Or use VS Code extension "Live Server" , if you have VS Code installed.

🤝 Contributing

• You can find issues to work on here.
• Found a bug? or have a good suggestion create a fresh issue here.

For more details, check CONTRIBUTING.md

NOTE:- For major changes, please open an issue first to discuss and then proceed further.

💁‍♂️ Contributors

Made with contributors-img.

📃 License

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

drawit's Issues

resizing window issue

when window is resized the current work on the blank space disappears

Cursor - pointer when hovered on a button

A pointer cursor for buttons is a good practice and indicates that button can be clicked on.

Add Drawing Preloader to the website for better User Experience

Update required in UI

@yashchaudhri008, the project is amazing and interesting in all the fields, but required a better UI as the button size of the CTF button is way too small and the responsiveness of the index.html page is there but again the button size was a problem. I have taken the leverage to get a confirmation alert if the user clicks the "Back to home" button in main.html.

I have integrated all the changes in my fork. I would request you to see the same and inform me of any amendments.

Adding Screenshots in README

Adding Screenshots section in README

Unwanted drawings on canvas

For bigger pen size (around 70) clicking increase or decrease button leaves an unwanted spot on canvas just below increase and decrease buttons.

instruction on top right side is very close to "-" button

"Press Q & A to change pen-size." instruction need little bit of padding and border

A11y Issues

Currently all of the interactive elements (except the color picker inputs, which I believe are just eh default) have no indication when tabbing through on the keyboard when they should have some sort of focus indication.

There's also a few elements that receive somrt sort of style change on hover for no real reason, namely the logo on load, the entire color section, and the pen size text. It might make it seem like a user can interact with these elements somehow, but they can't. The color section I can see an argument being made for, but I don't think there's any real reason to have the "Pen size: 3" text receive a style change on hover.

A final thing is the color inputs should be linked to their label by making "Background color" and "Pen color" actual label elements instead of just p elements.

I can fix this up if assigned.

The year in footer should update automatically

Adding this will make the copyright more efficient and you don't need to change it every year.

Assign this to me.

Back to Home Alert Message

#11
This just an added feature asking the user to confirm his/her exit from the main.html to index.html page.
@yashchaudhari008, I hope you like the idea.
Thanking you,
Mukul Singhal

Preloader

Adding a preloader to the web page.
Please assign this to me. So I can start working on it

Redesign top Tool bar and also make it work on mobiles.

Current:-

• Make it compact, simple
• Remove Text Hint and directly show binding on respective tool buttons
  And other UI changes to make it look better.

For reference use(on mobile):- https://excalidraw.com/

Add Full Screen Feature

Adding the full screen feature would make the user experience much better.

indicate max pen size an allow user easily input desired pen size from a list of sizes.

Display preview of actual pen size

It will be good if there will be a temporary visible bubble indicating pen size on change.
For now there is only one way to know pen size after change by clicking on canvas and this is bad bcoz we dont have erase and undo functionalities till now.

sentence in top left corner cut off in full size window

"Press Z to toggle to Eraser" instruction on top left corner been cut off needs padding and border

Changing cursor icon to brush tip.

Current scenario

In the existing code the cursor is just a simple arrow for the both the drawing mode and erasing mode. Also the pointed tip of the arrow cursor doesn't give the correct precision for various thickness/stroke of the brush tip. And the same arrow cursor doesn't help distinguish between drawing mode and erasing mode.

Proposed Solution

Completely replacing the cursor with a circle which will:

1. Trace the current position of mouse in the canvas.
2. Change it's colour according to the stroke colour.
3. Change it's size according to the stoke thickness.

The background theme of application can be made selectable by the user

Upon hovering, the button turns to black. I think we can make it selectable by the user itself. If you find it interesting, please assign me this!

Add a way to increase and decrease pen size on touch displays.

For desktops, key "Q" increases pen size and "A" decrease pen size. But there ia no way to change pen size on touch displays.

Add About Us section on home page

I would like to add about a about us section on the homepage. @yashchaudhari008 May I?

Add issue templates and pull request template

I would like to add the Issues and Pull request template so that if someone wants to contribute they can select the right template and contribute easily.

"Undo- Redo" Functionality can be added too

Kindly assign me this issue if you find it cool enough!

Add Eraser button

I would like to add a eraser button instead of "Press Z to toggle Pen/Eraser" . Also instead of simple toggle , it would be better if there is eraser box either circular or square shaped .

add transition duration on hover

The div which contains colors and pen-size have harsh transition. I'd like to add a transition duration to make it smooth.

Make App Responsive to work on Mobile Phones.

Currently app is clipped on mobile and toolbar is not great. I want a navbar holding all buttons and canvas to be aligned properly on mobile devices!

Erase function

Erase feature is quite demanding feature for this project.

Improve HTML semantics

Improve HTML semantics

Hi I've seen your code and I wanted to make some semantics improves? Could assign the task for me?

Pen preview like toast message.

Currently pen preview is shown on canvas and it's not mobile friendly. Pen-preview should be shown on toast message.

Expected Something Like:-

Changing the pen stroke size method.

Ability to change pen size by giving manual input along with Q and A keys will be good bcoz coming back to 3 from 10 will be quite easier in manual input than pressing A key multiple times.

Changing background colour clears the canvas

As captioned, the fix should keep the current drawing while only changing the background colour.

Please assign this issue to me @yashchaudhari008.

change pen size to eraser size on using eraser

on toggling from pen to eraser and eraser to pen the {pen/eraser} size should change respectively. on using eraser it should be eraser size not pen size. I want to solve this issue, please assign this to me.

pen size

allow user easily input pen size without having to click all the time

Improvment in README.

• Adding Hyperlinks
• Capitalization
• Languages Logo
• And some minor chnages.