zereraz / codraw

a collaborative drawing board

coDraw

coDraw is a collaborative drawing canvas it uses socket.io

Feautres

- Realtime Drawing
- Various tools like
    - Pen
    - Eraser
    - Text
    - Shapes
        - Circle
            - default
            - cone
            - target
        - Rectangle
            - default
            - RectCone
        - Line
            - default
            - lineCone
    - Brush
        - Simple
        - Fur
        - Rotating fur
        - Variable width

• Pen Size
• Full Screen mode
• Color Picker
• Background color change
• Drawing namespaced to rooms
• Clear Screen
• Download Image drawn
• Shortcut Keys
• Group chat available
• Opacity control

Install

• Clone the repo
• cd into it
• npm install

current location (testing)

illustrations

officially

codraw

codraw's Issues

Add admin, with synchronisation ability

Android Tab Related Issue

Add some more feature to work in android, if we draw any thing in android tab, we can able to draw with dot and move that dot without taking hand that will draw one line and the page is not static it is moving hear and their drawing is not smoother in tab comparing to windows browser, please add some more function on the perspective of android as well as ipad.

More shapes

More shapes like square, rectangle, triangle that has the same options as the circle for patterns.

Add a production version of coDraw

Setup the cloud server, production ready node.
Add mongo and redis if needed.

circle tool nuts

lots of bugs, probably have to use temporary canvas method for shapes, to prevent erasing other parts like https://dev.opera.com/articles/html5-canvas-painting/#rectangle

extra options for eraser

Using the way the line tool currently erases, give a lot of precision. So a tool that helps erase like a compass i.e using a pivot point. The line drawn will be only visible till the mouseup.

new circle option which erases all previous circles on reducing the radius

Add backend validation

Backend validation incase javascript is disabled.

Fix window to viewport, save fullscreen data

Convert the fullscreen data to small screen or save the fullscreen state and show it on full screen.

On shape drag back

when dragging back towards the origin of shape the previous image is not completely erased,
fix here https://dev.opera.com/articles/html5-canvas-painting/#rectangle

Restart a brush library

Add opacity feature

opacity for all forms of drawings

Eraser fix

transparency erase, not background color erase

remove user from room on disconnect

New opacity feature bug

opacity leads to spots being drawn while drawing

Image download without background

Image is being downloaded without canvasBg included.

prevent accidental select of canvas

solution
http://stackoverflow.com/questions/7059039/prevent-accidental-select-drag-highlight
http://stackoverflow.com/questions/5796512/how-to-disable-select-for-html5-canvas-element

status update

The status, containing the number of people, probably with their usernames.

site not working on touch enabled devices.

Need to add touch related libraries.

pen not drawing at the center of crosshair