CanvasEditor

CanvasEditor is a web-based image editing tool that allows users to create and customize visual content easily. Built with React and Konva, it provides a simple and intuitive interface for adding text, images, and backgrounds to a canvas.

Features

• Add and edit text elements
• Upload and place images on the canvas
• Change background image
• Resize and move elements
• Export canvas as PNG

Getting Started

Prerequisites

• Node.js (version 12 or higher)
• npm or yarn

Installation

1. Clone the repository: git clone https://github.com/your-username/canvas-editor.git

2. Navigate to the project directory: cd canvas-editor

3. Install dependencies: npm install or yarn install

4. Start the development server: npm run dev or yarn dev

5. Open your browser and visit http://localhost:5173 (or the port shown in your terminal).

Usage

1. Use the "Add content" section to add text or images to your canvas.
2. Click on elements to select them. Resize using the bottom-right corner handle.
3. Drag elements to reposition them on the canvas.
4. Use the "Background" button to change the canvas background.
5. Click "Export to PNG" to download your creation.

Technologies Used

• React
• TypeScript
• Konva
• Vite

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.