react-sketchpad

by svrcekmichal

svrcekmichal / react-sketchpad

Sketch pad created with canvas

224 Stars 51 Forks Last release: Not found MIT License 11 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.