This project is a simple canvas editor implemented with vanilla HTML Canvas and React. It allows users to select an image, place it within a mask on the canvas, and customize the caption text, call to action (CTA), and background color of the template.
- Select and upload an image to be placed within a mask on the canvas.
- Customize the caption text with options for font size, alignment, and maximum characters per line.
- Customize the call to action (CTA) text with options for font size, text color, and background color.
- Change the background color of the canvas template.
- Clean and user-friendly UI, with consistent design elements.
- The canvas functionality is implemented using Classes and Object-Oriented Programming (OOP) concepts.
- Uses React functional components for UI rendering.
- Uses vanilla HTML Canvas for drawing graphics and text on the canvas.
- Utilizes Tailwind CSS for styling, but can be customized with any UI library of choice.
- Avoids the use of external libraries like fabric.js, implementing all functionality from scratch.
The template data provided includes information about the caption, CTA, image mask, and URLs for resources like the mask image, mask stroke, and design patterns.
To use the canvas editor, follow these steps:
- Clone the repository to your local machine.
- Install dependencies using
npm install. - Run the application with
npm start. - Upload an image, customize the caption and CTA text, and adjust the background color as desired.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent