Need help with react-sketchpad?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

svrcekmichal
236 Stars 52 Forks MIT License 11 Commits 9 Opened issues

Description

Sketch pad created with canvas

Services available

!
?

Need anything else?

Contributors list

# 308,036
buckles...
reasonm...
HTML
5 commits
# 165,221
JavaScr...
axios
http-cl...
redux-m...
3 commits
# 156,658
React
CSS
HTML
reactjs
1 commit

react-sketchpad

Sketch pad created with canvas

Why I built this?

  1. to learn
  2. to learn
  3. to learn
  4. just have fun? :D

Example:

Draw little frog

Draw react logo with aniamted pencil

There was websocket used in this gifs, which is not part of example. To make it work with syncing just run this little websocket server

import Server from 'socket.io';
const io = new Server().attach(12346);

io.on('connection', (socket) => { socket.on('addItem', (data) => { console.log(data); socket.broadcast.emit('addItem', data); }); });

API:

|Attribute |Type |Default Value |Description | |--- |--- |--- |--- | | width | number | 500 | width of canvas in pixels | | height | number | 500 | height of the canvas in pixels | | items | array | - | array of items to draw in canvas | | animate | bool | true | few tools, for example pencil, can be animated when drawn | | canvasClassName | string | .canvas | css class of canvas | | color | string | #000 | primary drawing color | | fillColor | string |

""
| color used for filling items like circle or rectangle, empty string is no filling | | size | number | 5 | size of the item | | tool | string | TOOL_PENCIL | currently used tool from the map | | toolsMap | object | object map | keys are tool names, values are tool functions, by default Pencil, Line, Circle and Rectangle tools are available | | onItemStart | func | - | function to be executed on item start, most of the time first argument is item | | onEveryItemChange | func | - | function to be executed on item change, most of the time first argument is item, other arguments describe changes | | onDebouncedItemChange | func | - | function to be executed in interval on item change, most of the time first argument is item, other arguments describe batched changes | | onCompleteItem | func | - | function to be executed on item end, most of the time first argument is item | | debounceTime | number | 1000 | how often onDebouncedItemChange will be called |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.