2201monesh / next-canvas-app

This is a Whiteboard Canvas Web App which allows users to sketch and draw anything they like and also has drag, resize, erase options with stroke and color width change functionality.

Canvas Application with Fabric.js in Next.js

This is a simple canvas application built using Fabric.js in a Next.js project. The application allows users to draw shapes, upload images, and use a pen or eraser to sketch on the canvas.

Features

• Image Upload: Users can upload images to the canvas. The images can be rotated, resized, and dragged.

• Drawing Shapes: Basic shapes like squares and circles can be drawn on the canvas. These shapes can be resized and dragged.

• Sketching Tool:

  • Pen: Users can sketch on the canvas using a pen. The color and stroke width of the pen can be changed.
  • Eraser: An eraser tool is available to erase sketches on the canvas.

Getting Started

1. Clone the Repository:

   git clone <repository-url>
   cd canvas-app-nextjs
   

2. Install Dependencies:

   npm install
   

3. Run the Application:

   npm run dev

Note

To make any changes in the canvas click on the buttons provided to enable the feature (to draw click on pen and start drawing and when done click on the pen again to disable it before using other feature like eraser or pen stroke)

Usage

• Click the "Draw Square" button to add a square to the canvas.
• Click the "Draw Circle" button to add a circle to the canvas.
• Click the "Pen" button to enable the pen tool. Adjust the color and width using the input controls.
• Click the "Eraser" button to enable the eraser tool.
• Upload images using the file input.

Contributing

Contributions are welcome! If you'd like to contribute to the project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push the changes to your fork.
5. Open a pull request.