brighton-asumani / canvas

A simple react canvas

React Canvas

Overview

This application is designed to provide a user-friendly interface for creating and manipulating shapes and text elements on a canvas. It utilizes React.js along with the react-bootstrap and react-konva libraries to achieve this functionality.

Features

• Shape Creation: Users can add various shapes such as circles, rectangles, diamonds, and text to the canvas.
• Color Customization: Users can customize the colors of the shapes and text using color pickers.
• Undo/Redo: The application supports undo and redo functionality for reverting and reapplying changes.
• Download Project: Users can download the canvas as an image file.
• Responsive Design: The application is designed to be responsive and can adapt to different screen sizes.

Installation

To install and run the application locally, follow these steps:

1. Clone the repository: git clone [repository URL]
2. Navigate to the project directory: cd [project directory]
3. Install dependencies: npm install
4. Start the development server: npm start

Usage

Once the application is running, users can perform the following actions:

• Add Shapes: Click on the shape icons in the sidebar to add shapes to the canvas.
• Customize Colors: Use the color pickers in the sidebar to customize the colors of the shapes and text.
• Edit Text: Double-click on text elements to edit their content.
• Undo/Redo: Use the Undo and Redo buttons in the navigation bar or keyboard shortcuts (Ctrl + Z for Undo, Ctrl + Y for Redo) to revert and reapply changes.
• Download Project: Click on the "File" dropdown in the navigation bar and select "Download Project" to download the canvas as an image file.

Dependencies

• react
• react-bootstrap
• react-konva
• @fortawesome/react-fontawesome

Development

The application is developed using React.js and follows modern JavaScript and JSX syntax. It utilizes functional components, hooks (useState, useEffect, useRef), and libraries such as react-bootstrap and react-konva for UI and canvas manipulation.

License

Contributors

Support

For any issues or inquiries, please contact [email protected]