Create a Drawing App with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a drawing app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app drawing-app

with NPM to create our React project.

Create the Drawing App

To create the drawing app, we write:

import React, { useEffect, useRef, useState } from "react";

export default function App() {
  const canvas = useRef();
  const [pos, setPos] = useState({});

  const setPosition = (e) => {
    setPos({
      x: e.clientX,
      y: e.clientY
    });
  };

  const resize = () => {
    const ctx = canvas.current.getContext("2d");
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  };

  const draw = (e) => {
    if (e.buttons !== 1) {
      return;
    }
    const ctx = canvas.current.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.strokeStyle = "green";
    ctx.moveTo(pos.x, pos.y);
    setPosition(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  };

  useEffect(() => {
    window.addEventListener("resize", resize);
    return () => window.removeEventListener("resize", resize);
  }, []);

  return (
    <div>
      <style>
        {`
          #canvas {
            border: 1px solid black;
          }
        `}
      </style>
      <canvas
        ref={canvas}
        onMouseMove={draw}
        onMouseDown={setPosition}
        onMouseEnter={setPosition}
        id="canvas"
      ></canvas>
    </div>
  );
}

We create the canvas ref which will be assigned to the canvas element.

Then we define the pos state to set the position of the canvas pointer.

Then we define the setPosition function which sets the pos state value from the clientX and clientY event property values.

Next, we define the resize function that gets the canvas and then set the width and height of the canvas when the window is resized.

After that, we define the draw function to draw the line.

We get the e parameter with the event object.

First, we check if we click on the left button by checking if e.buttons is 1.

We continue only if e.buttons is 1.

Next, we get the canvas element object.

Then we call beginPath to start drawing.

And we set the line width, line cap style, and stroke style.

Then we call moveTo to move the pointer to the given position.

Then we call setPosition to set the pos value to the same value.

And we call lineTo again with the end coordinate of the line to set the end coordinate of the line.

And then we call ctx.stroke to draw the line.

Then we add the useEffect hook with a callback that resizes the canvas when we resize the window.

And below that, we add the style element to add a border to the canvas.

And finally, we add the canvas and assign the event handlers that are run when we click and move the mouse.

Conclusion

We can create a drawing app easily with React and JavaScript.