How to implement free drawing on canvas with react?

This demo shows how to implement a free drawing app the “react-way” with full vector representation.

Such an implementation should work ok for many whiteboard apps. It allows you to simply add undo/redo functions and save the full state to the backend.

It will get slower if you have too many lines in the state. So you will have to do some extra optimizations if you want to enable drawings of hundreds or thousands of lines.

Enjoying Konva? Please consider to support the project.