react-sketchpad
Sketch pad created with canvas
Why I built this?
- to learn
- to learn
- to learn
- just have fun? :D
Example:
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 |