https://github.com/svrcekmichal/react-sketchpad
Sketch pad created with canvas
https://github.com/svrcekmichal/react-sketchpad
Last synced: about 2 months ago
JSON representation
Sketch pad created with canvas
- Host: GitHub
- URL: https://github.com/svrcekmichal/react-sketchpad
- Owner: svrcekmichal
- License: mit
- Created: 2016-04-12T17:50:42.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-30T22:19:53.000Z (almost 7 years ago)
- Last Synced: 2025-03-31T07:09:32.266Z (about 2 months ago)
- Language: JavaScript
- Size: 3.09 MB
- Stars: 244
- Watchers: 7
- Forks: 51
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
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
```js
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 |