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 - neveropen</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.
npm start
Output:
