Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Drawing Canvas in React.js ?

Improve Article
Save Article
  • Last Updated : 28 Dec, 2021
Improve Article
Save Article

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:


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

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!