How to Drawing Canvas in React.js ?

0 0 1 minute read

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.

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.

Create ReactJs Application: You can create a new ReactJs project using the below command:

npx create-react-app gfg

Install the required package: Now we will install the react-canvas-paint package using the below command:

npm i react-canvas-paint

Project Structure: It will look like this.

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.

Add the below content in the App.js file:

Javascript

import React from "react";
import ReactCanvasPaint from 'react-canvas-paint'
import 'react-canvas-paint/dist/index.css'
 
export default function DrawingCanvasGfg() {
    return (
        <div>
            <h1>ReactJs Drawing Canvas - zambiatek</h1>
            <ReactCanvasPaint />
        </div>
    );
};

Explanation: In the above example first, 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.