Build a Simple React JavaScript Interactive Drawing App: A Beginner’s Guide

Written by

learnmodernjavascript

in

Ever wanted to create your own digital art or simply doodle on your computer? In this tutorial, we’ll build a simple yet functional drawing app using ReactJS. This project is perfect for beginners and intermediate developers looking to enhance their React skills while creating something fun and interactive. We’ll cover everything from setting up the project to implementing drawing functionality, color selection, and clearing the canvas.

Why Build a Drawing App?

Building a drawing app is an excellent way to learn and practice fundamental React concepts. It provides a hands-on opportunity to work with state management, event handling, and DOM manipulation. Moreover, it’s a relatively contained project, making it ideal for those new to React. It allows you to focus on the core principles without getting bogged down in complex features.

What We’ll Cover

In this tutorial, we will:

  • Set up a new React project.
  • Create a canvas element for drawing.
  • Implement mouse event listeners to track drawing actions.
  • Enable color selection.
  • Add a feature to clear the canvas.
  • Discuss common mistakes and how to avoid them.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed on your system.
  • A basic understanding of HTML, CSS, and JavaScript.
  • A code editor (like VS Code, Sublime Text, etc.).

Step-by-Step Guide

1. Setting Up the React Project

First, let’s create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-drawing-app
cd react-drawing-app

This command sets up a new React project with all the necessary dependencies. After the project is created, navigate into the project directory.

2. Project Structure and Initial Setup

Our project structure will be relatively simple. We’ll focus on the core components for drawing functionality. The main components we will be working with are:

  • App.js: The main component that renders the drawing canvas, color picker, and clear button.
  • DrawingCanvas.js: A component that handles the drawing logic on the canvas element.

Let’s start by cleaning up the default App.js file. Replace the content of src/App.js with the following code:

import React, { useState } from 'react';
import DrawingCanvas from './DrawingCanvas';

function App() {
  const [selectedColor, setSelectedColor] = useState('#000000'); // Default color: black

  const handleColorChange = (event) => {
    setSelectedColor(event.target.value);
  };

  return (
    <div className="app-container">
      <div className="controls">
        <label htmlFor="colorPicker">Choose Color:</label>
        <input
          type="color"
          id="colorPicker"
          value={selectedColor}
          onChange={handleColorChange}
        />
      </div>
      <DrawingCanvas selectedColor={selectedColor} />
    </div>
  );
}

export default App;

This code sets up the basic structure of our app. It includes a color picker and renders the DrawingCanvas component. Also, create a new file named DrawingCanvas.js in the src directory. We will implement the drawing logic in this component.

3. Creating the Drawing Canvas Component

Now, let’s create the DrawingCanvas.js component. This component will handle the drawing functionality. Add the following code to src/DrawingCanvas.js:

import React, { useRef, useEffect } from 'react';

function DrawingCanvas({ selectedColor }) {
  const canvasRef = useRef(null);
  const isDrawingRef = useRef(false);
  let ctx;

  useEffect(() => {
    const canvas = canvasRef.current;
    ctx = canvas.getContext('2d');
    ctx.lineCap = 'round'; // Makes the line endings rounded
    ctx.lineJoin = 'round'; // Makes the line joins rounded

    // Set initial canvas size
    canvas.width = window.innerWidth * 0.8; // 80% of the window width
    canvas.height = window.innerHeight * 0.8; // 80% of the window height

  }, []);

  const startDrawing = (e) => {
    isDrawingRef.current = true;
    draw(e);
  };

  const stopDrawing = () => {
    isDrawingRef.current = false;
    ctx.beginPath(); // Resets the path
  };

  const draw = (e) => {
    if (!isDrawingRef.current) return;

    const rect = canvasRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    ctx.strokeStyle = selectedColor;
    ctx.lineWidth = 5;
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
  };

  const clearCanvas = () => {
    if (ctx) {
      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
    }
  };

  return (
    <div className="canvas-container">
      <canvas
        ref={canvasRef}
        onMouseDown={startDrawing}
        onMouseUp={stopDrawing}
        onMouseOut={stopDrawing}
        onMouseMove={draw}
      ></canvas>
      <button onClick={clearCanvas}>Clear Canvas</button>
    </div>
  );
}

export default DrawingCanvas;

This code defines the DrawingCanvas component. It uses the useRef hook to access the canvas DOM element and the useEffect hook to initialize the canvas context. It also includes event listeners for mouse events (onMouseDown, onMouseUp, onMouseOut, and onMouseMove) to handle drawing. The draw function actually draws on the canvas.

4. Implementing Drawing Functionality

Let’s break down the key parts of the drawing functionality:

  • canvasRef: This useRef hook is used to get a reference to the canvas element. This allows us to access and manipulate the canvas directly.
  • isDrawingRef: This useRef hook keeps track if the mouse is down, and the user is drawing.
  • useEffect: This hook runs once after the component mounts. It gets the 2d rendering context of the canvas and sets the line cap and line join styles. Additionally, it sets the canvas dimensions to fill most of the screen.
  • startDrawing: Sets isDrawingRef.current to true and starts the drawing path.
  • stopDrawing: Sets isDrawingRef.current to false and ends the current drawing path.
  • draw: This function is the core of the drawing logic. It checks if the user is currently drawing (isDrawingRef.current). If so, it calculates the mouse position relative to the canvas, sets the stroke color from the selected color, sets the line width, and draws a line to the current mouse position. It then resets the path to prepare for the next line segment.
  • Event Listeners: The onMouseDown, onMouseUp, onMouseOut, and onMouseMove event listeners are attached to the canvas element to capture mouse events.

5. Adding Color Selection

In the App.js file, we’ve already included a color picker. Let’s make sure the selected color is used when drawing. The selectedColor state variable is passed as a prop to the DrawingCanvas component. In the draw function within DrawingCanvas.js, we use this selectedColor to set the strokeStyle of the canvas context.

ctx.strokeStyle = selectedColor;

This ensures that the drawing color matches the selected color from the color picker.

6. Adding a Clear Canvas Feature

To add a clear canvas feature, we’ll implement a button that, when clicked, clears the entire canvas. In the DrawingCanvas.js component, we have a clearCanvas function:

const clearCanvas = () => {
  if (ctx) {
    ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
  }
};

This function uses the clearRect method of the canvas context to clear the entire canvas. We also added a button in the DrawingCanvas.js component that triggers this function when clicked.

7. Styling the App

To make the app look better, let’s add some basic styling. Create a file named App.css in the src directory and add the following CSS:

.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.controls {
  margin-bottom: 10px;
}

.canvas-container {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

canvas {
  background-color: #fff;
}

Import App.css into App.js:

import './App.css';

Now, let’s add some styling to the DrawingCanvas.js component. Create a file named DrawingCanvas.css in the src directory and add the following CSS:

.canvas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

canvas {
  border: 1px solid #000;
  cursor: crosshair;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

Import DrawingCanvas.css into DrawingCanvas.js:

import './DrawingCanvas.css';

8. Running the App

To run the app, navigate to your project directory in the terminal and run:

npm start

This will start the development server, and you should see the drawing app in your browser. You can now select a color and start drawing on the canvas.

Common Mistakes and How to Fix Them

1. Incorrect Canvas Dimensions

One common mistake is not setting the canvas dimensions correctly. If the dimensions are not set, the canvas might not be visible or might appear distorted. The solution is to set the width and height attributes of the canvas element or, as we did, set them using JavaScript in the useEffect hook. Make sure to set these dimensions after getting the context.

const canvas = canvasRef.current;
canvas.width = window.innerWidth * 0.8; // Example: 80% of the window width
canvas.height = window.innerHeight * 0.8; // Example: 80% of the window height

2. Not Initializing the Context

Another common mistake is forgetting to initialize the 2D rendering context. Without the context, you cannot draw anything on the canvas. Ensure you get the context using getContext('2d') and store it in a variable.

const ctx = canvas.getContext('2d');

3. Drawing Outside the Canvas

If you’re using absolute positioning or not accounting for the canvas’s position on the page, the drawing might appear offset. Ensure that you calculate the mouse position relative to the canvas using getBoundingClientRect().

const rect = canvasRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

4. Not Clearing the Path

If you don’t clear the path after each line segment, the lines might not appear as expected. Use ctx.beginPath() at the end of the draw function to reset the path for the next line segment.

ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);

5. Incorrect Event Handling

Ensure that you’re correctly handling mouse events. For example, if you’re not capturing onMouseUp and onMouseOut events to stop drawing, the lines might continue even when the mouse is not pressed. Make sure you’re attaching the appropriate event listeners to the canvas element.

Key Takeaways

  • React Fundamentals: This project reinforces core React concepts like state management (using useState), working with refs (using useRef), and handling events.
  • Canvas API: You’ve learned how to use the HTML Canvas API to create interactive graphics.
  • Event Handling: You’ve gained experience in handling mouse events to create a drawing experience.
  • Component Structure: You’ve structured a React application with components for reusability and maintainability.

FAQ

1. How can I add different brush sizes?

You can add a brush size selector (e.g., a select dropdown) and use a state variable to store the selected brush size. Then, in the draw function, set the lineWidth of the canvas context based on the selected brush size.

ctx.lineWidth = brushSize;

2. How can I add more colors to the color picker?

Instead of using a single color input, you can use a list of predefined color swatches. You can create a component that renders these swatches, and when a swatch is clicked, it updates the selected color state.

3. How do I add an eraser tool?

You can implement an eraser tool by setting the strokeStyle to the background color of the canvas. You would add a button to switch between the draw tool and the eraser tool. When the eraser tool is selected, the strokeStyle will be set to the canvas background color.

4. Can I save the drawings?

Yes, you can save the drawings by converting the canvas content to a data URL (using canvas.toDataURL()) and then allowing the user to download it as an image. You could also implement saving to local storage.

5. How can I make the app responsive?

Ensure that the canvas dimensions are set relative to the screen size. You can use percentages or viewport units (vw, vh) to define the canvas dimensions. Additionally, consider adding media queries to adjust the layout and styling for different screen sizes.

This tutorial provides a solid foundation for building a simple drawing app in React. By experimenting with different features and improvements, you can expand your skills and create even more advanced drawing tools. This project is a great starting point for anyone looking to combine React with the power of the HTML Canvas API.

More posts