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:
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.
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 - w3wiki</h1> <ReactCanvasPaint /> </div> ); }; |
Steps to Run the application: Run the below command in the terminal to run the app.
npm start
Output:
Contact Us