This application is an interactive grid-based drawing tool built with JavaScript and the HTML5 Canvas API. It enables users to create artwork by coloring and manipulating individual cells within a customizable grid.
Key Features
- Customizable Grid Pattern:
- Define cell sizes by specifying patterns (e.g., "48,16") for varied dimensions.
- Toggle grid lines on or off for clarity.
- Drawing Tools:
- Color Picker: Choose colors to fill grid cells.
- Fill Tool: Change the color of connected cells of the same color.
- Eraser: Remove color from cells.
- Pick Color Tool: Sample colors from existing cells.
- Canvas Manipulation:
- Pan and Zoom: Navigate the canvas and adjust zoom levels.
- Rotation: Rotate the canvas to a specified angle.
- Reset Zoom: Return to the default zoom level.
- Image Handling:
- Load Image: Import an image and map its colors onto the grid cells.
- Save Image: Export the canvas as a PNG file.
- State Management:
- Undo/Redo: Navigate through the drawing history.
- Clear Canvas: Start fresh by clearing all drawings.
- Save/Load State:
- Export grid data as a JSON file.
- Import a JSON file to restore a drawing.
Try it from here.
