How to Drawing Canvas in React.js ?

In this article, we are going to learn how we can add drawing canvas in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

Prerequisites:

• NodeJS or NPM
• React JS

Approach:

To add our canvas we are going to use the react-canvas-paint package. The react-canvas-paint package helps us to integrate the drawing canvas in our app. So first, we will install the react-canvas-paint package and then we will add a canvas on our homepage.

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install the required package react-canvas-paint package using the below command:

npm i react-canvas-paint

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-canvas-paint": "^1.0.1",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Adding the Drawing Canvas: After installing the package we can easily add a canvas on any page in our app. For this example, we are going to add a canvas to our homepage.

Example: Add the below content in the App.js file, We are importing the ReactCanvasPaint component and after that, we are using the installed component in a new function to add our drawing canvas.

Steps to Run the application: Run the below command in the terminal to run the app.

npm start

Output: