Open In App

Paint App using ReactJS

Last Updated : 21 Jul, 2023
Like Article

In this article, we will be building a simple paint application that lets you draw just like in MS-Paint. Through this article, we will learn how to implement and work with canvas in React.js. Our app contains two sections, one for drawing and the other is a menu where the user can customize the brush color, width, and opacity. The user will be provided with a brush and draw on the canvas using that brush.

Let us have a look at how the final project will look like:


Prerequisites: The pre-requisites for this project are:


We will create three functions: startDrawing(), endDrawing() and draw(). The main idea is that whenever the mouse button is down, we execute the startDrawing function so that the cursor knows the x and y coordinate (starting coordinates) and we toggle the isDrawing state to true. Now whenever the user moves the mouse, we execute the draw function which will draw a stroke in the current x and y coordinate. If the user lifts the mouse button up we execute the endDrawing function which will close the stroke path and toggle the isDrawing state to false simultaneously.

Creating a React application:

  • Step 1: Create a react application by typing the following command in the terminal:
npx create-react-app paint-app
  • Step 2: Now, go to the project folder i.e paint-app by running the following command:
cd paint-app

Step 3: Create a folder called components in src directory and inside the components folder, create a file named Menu.js

Project Structure:

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

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

Example: Write the following code in respective files.

  • App.js: In this file we will implement the canvas and work with it.  Now write down the following code in the App.js component.
  • Menu.js: In this file we will creat a  menu bar where users can customize the brush color, size, and opacity.
  • App.css: In this file we will style our paint component. 


// App.js
import { useEffect, useRef, useState } from "react";
import Menu from "./components/Menu";
import "./App.css";
function App() {
    const canvasRef = useRef(null);
    const ctxRef = useRef(null);
    const [isDrawing, setIsDrawing] = useState(false);
    const [lineWidth, setLineWidth] = useState(5);
    const [lineColor, setLineColor] = useState("black");
    const [lineOpacity, setLineOpacity] = useState(0.1);
    // Initialization when the component
    // mounts for the first time
    useEffect(() => {
        const canvas = canvasRef.current;
        const ctx = canvas.getContext("2d");
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        ctx.globalAlpha = lineOpacity;
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctxRef.current = ctx;
    }, [lineColor, lineOpacity, lineWidth]);
    // Function for starting the drawing
    const startDrawing = (e) => {
    // Function for ending the drawing
    const endDrawing = () => {
    const draw = (e) => {
        if (!isDrawing) {
    return (
        <div className="App">
            <h1>Paint App</h1>
            <div className="draw-area">
export default App;


// Menu.js
import React from "react";
import "../App.css";
const Menu = ({ setLineColor, setLineWidth,
    setLineOpacity }) => {
    return (
        <div className="Menu">
            <label>Brush Color </label>
                onChange={(e) => {
            <label>Brush Width </label>
                onChange={(e) => {
            <label>Brush Opacity</label>
                onChange={(e) => {
                    setLineOpacity( / 100);
export default Menu;


/* App.css */
.App {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
h1 {
    font-family: 'Lobster', cursive;
    font-size: 50px;
    color: #4644f0;
.draw-area {
    width: 1280px;
    height: 720px;
    border: 2px solid #808080;
    position: relative;
    background-color: white;
.Menu {
    width: 650px;
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    border-radius: 5px;
    align-items: center;
    background-color: #a3a3a32d;
    margin: auto;
    margin-top: 10px;

Steps to Run Application

Step 1: Run the application using the following command from the root directory of the project.

npm start

Step 2:  Open your browser and go to http://localhost:3000/


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads