Features:
- Load an image and present it (hardcoded image address is ok)
- Ask the user to trace a shape ("Please draw a path to create a puzzle piece")
- Trace a path freely by pressing the mouse and moving it. once mouse is up, close the shape
- The new cut shape should be draggable paint the hole (where shape was cut from) in gray shape will have an x icon attached on it's border tapping on the x button will delete the shape and fill the hole back.
Guidelines
- Pay attention to the experience, if you have ideas on how to make it awesome, please show us.
- We're leaving you without graphics, you can find icons online, try and choose designs that work together.
- Using React + Canvas
- Using an internal react component state
- Mind code quality and structure
- Keep it as simple as possible. Support Chrome/Firefox/Safari only - no IE
- Use Webpack for frontend toolchain (create-react-app is ok)
- style: style-components
- state management: xState
- react Hooks
- canvas