https://github.com/hitesh-c/whiteboard
WhiteBoard using hooks, created by me
https://github.com/hitesh-c/whiteboard
canvas collaborate github github-campus-experts github-pages react typescript
Last synced: about 1 month ago
JSON representation
WhiteBoard using hooks, created by me
- Host: GitHub
- URL: https://github.com/hitesh-c/whiteboard
- Owner: hitesh-c
- License: mit
- Created: 2022-05-15T07:24:59.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-23T12:03:58.000Z (almost 4 years ago)
- Last Synced: 2025-10-24T10:34:49.386Z (8 months ago)
- Topics: canvas, collaborate, github, github-campus-experts, github-pages, react, typescript
- Language: JavaScript
- Homepage: https://hitesh-c.github.io/whiteboard
- Size: 1.69 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Whiteboard
Simple Whiteboard app made with React, custom hooks, Canvas API
## Demo
https://hitesh-c.github.io/whiteboard
## How to start:
1. install packages by Yarn Install
2. it may also require typescript in your system folder
## For undo functionality,
i created a object which store array { undoSteps } of coordinates.
i also keep track on { undo }
when undo button is clicked, it take out { data } object via undoSteps[undo]
as data is array of cordinates,
we only need to retrace on data.
data.forEach((item: any, index: number) => {
if (index !== 0) {
ctx.current.lineTo(item.offsetX, item.offsetY);
ctx.current.stroke();
}
});
after undo, we push in { redoSteps } and increment in { redo }
For redo functionality, same happens in redoSteps[redo]