This device is not compatible.


Create an Online Photo Editor Using React

Learn to build a photo editing application with HTML5 canvas, Fabric.js, and React.js.

Create an Online Photo Editor Using React

You will learn to:

Use the functional components of React.

Edit images using canvas and Fabric.js.

Apply and cancel edits done on images.

Convert canvases to images and download images.


Web Development

Front-end Development


Intermediate understanding of React

Intermediate understanding of JavaScript

Basic understanding of Fabric.js





Project Description

In this project, we’ll develop a React web application that provides a user-friendly interface for editing images. The application will allow users to crop, rotate, and resize images. Users will also be able to add text and different shapes to images. We’ll implement the application’s features using Fabric.js, a powerful and flexible JavaScript library for working with HTML5 canvas.

Overall, the project will offer a powerful and user-friendly tool for editing images using React and Fabric.js, ensuring that users can quickly and easily create images that meet their requirements.

Project Tasks


Upload and Draw the Image

Task 0: Getting Started

Task 1: Upload Image on Click Event

Task 2: Upload Image on Drag Event

Task 3: Draw the Image on the Canvas


Edit the Image

Task 4: Crop the Image

Task 5: Rotate the Image

Task 6: Resize the Image

Task 7: Add Shapes to the Image

Task 8: Add Text to the Image


Finalize the Edits

Task 9: Apply Edits to the Image

Task 10: Cancel the Edits on an Image

Task 11: Download the Image