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

Written by

learnmodernjavascript

in

Ever wished you could quickly sketch out an idea, create a simple diagram, or just doodle without needing fancy software? In this tutorial, we’re going to build a basic drawing app using React. This project is perfect for beginners and intermediate developers looking to solidify their understanding of React fundamentals like state management, event handling, and component composition. We’ll break down the process step-by-step, making it easy to follow along and create your own interactive drawing tool.

Why Build a Drawing App?

Creating a drawing app, even a simple one, provides a fantastic learning experience. It allows you to:

  • Practice Core React Concepts: You’ll work with state, props, and event listeners extensively.
  • Understand DOM Manipulation: You’ll learn how to interact with the HTML canvas element.
  • Build Interactive User Interfaces: You’ll make a UI that responds to user input (mouse clicks, mouse movements).
  • Gain Practical Experience: You’ll create something tangible that you can use and show off.

This project is also a great stepping stone to more complex React applications. The principles you learn here can be applied to a wide range of projects, from games to data visualization tools.

Project Setup

Let’s get started! We’ll use Create React App to quickly set up our project. If you don’t have it installed, open your terminal and run the following command:

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

This command creates a new React app named “drawing-app”. Then, navigate into the project directory. Now, let’s clean up the boilerplate code. Open the `src` directory and delete the following files: `App.css`, `App.test.js`, `logo.svg`, `reportWebVitals.js`, and `setupTests.js`. Then, modify `App.js` and `index.js` to the minimal required code as shown below.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

App.js:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Simple Drawing App</h1>
    </div>
  );
}

export default App;

This minimal setup ensures our app runs without unnecessary distractions. Now, let’s start building the drawing functionality.

Creating the Canvas Component

The heart of our drawing app will be the canvas, where the user will draw. We’ll create a new component specifically for handling the canvas element and its interactions.

Create a new file named `Canvas.js` inside the `src` directory. Paste the following code into `Canvas.js`:

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

function Canvas() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    // Set initial canvas properties
    context.strokeStyle = 'black';  // Default drawing color
    context.lineWidth = 2;          // Default line width

    let isDrawing = false;

    const startDrawing = (e) => {
      isDrawing = true;
      draw(e);
    };

    const stopDrawing = () => {
      isDrawing = false;
      context.beginPath(); // Reset the path when the mouse is released
    };

    const draw = (e) => {
      if (!isDrawing) return;

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

      context.lineTo(x, y);
      context.stroke();
      context.beginPath(); // Start a new path for each line segment
      context.moveTo(x, y);
    };

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseout', stopDrawing);

    return () => {
      // Clean up event listeners when the component unmounts
      canvas.removeEventListener('mousedown', startDrawing);
      canvas.removeEventListener('mouseup', stopDrawing);
      canvas.removeEventListener('mousemove', draw);
      canvas.removeEventListener('mouseout', stopDrawing);
    };
  }, []); // Empty dependency array means this effect runs only once after the initial render.

  return (
    <canvas
      ref={canvasRef}
      width={600}
      height={400}
      style={{ border: '1px solid black' }}
    />
  );
}

export default Canvas;

Let’s break down this code:

  • `useRef` Hook: We use `useRef` to get a reference to the `<canvas>` DOM element. This allows us to access and manipulate the canvas directly.
  • `useEffect` Hook: This hook runs after the component renders. It’s crucial for setting up event listeners (mousedown, mouseup, mousemove) on the canvas. The empty dependency array `[]` ensures the effect runs only once, when the component mounts.
  • `getContext(‘2d’)`: This gets the 2D rendering context of the canvas, which we’ll use to draw.
  • Event Listeners: We attach event listeners to handle mouse events:
    • `mousedown`: Starts drawing.
    • `mouseup` and `mouseout`: Stops drawing.
    • `mousemove`: Draws lines as the mouse moves.
  • `isDrawing` State: A boolean variable to track whether the mouse button is currently pressed.
  • Drawing Logic: The `draw` function calculates the mouse coordinates relative to the canvas and draws lines using `context.lineTo()` and `context.stroke()`.
  • Cleanup: The `useEffect` hook returns a cleanup function (the `return () => { … }` part). This function removes the event listeners when the component unmounts, preventing memory leaks.

Now, import and use the `Canvas` component in `App.js`:

import React from 'react';
import Canvas from './Canvas';

function App() {
  return (
    <div>
      <h1>Simple Drawing App</h1>
      <Canvas />
    </div>
  );
}

export default App;

Save both files and run your React app (usually with `npm start`). You should see a black-bordered canvas. Try clicking and dragging your mouse within the canvas to draw.

Adding Color and Line Width Controls

Our drawing app is functional, but it’s a bit limited. Let’s add controls for selecting the drawing color and line width. We’ll create a new component called `Controls` to manage these settings.

Create a new file named `Controls.js` in the `src` directory. Add the following code:

import React, { useState } from 'react';

function Controls({ onColorChange, onLineWidthChange }) {
  const [selectedColor, setSelectedColor] = useState('black');
  const [lineWidth, setLineWidth] = useState(2);

  const handleColorChange = (e) => {
    const newColor = e.target.value;
    setSelectedColor(newColor);
    onColorChange(newColor);
  };

  const handleLineWidthChange = (e) => {
    const newLineWidth = parseInt(e.target.value, 10);
    setLineWidth(newLineWidth);
    onLineWidthChange(newLineWidth);
  };

  return (
    <div style={{ marginBottom: '10px' }}>
      <label htmlFor="colorPicker">Color: </label>
      <input
        type="color"
        id="colorPicker"
        value={selectedColor}
        onChange={handleColorChange}
        style={{ marginRight: '10px' }}
      />

      <label htmlFor="lineWidth">Line Width: </label>
      <input
        type="number"
        id="lineWidth"
        value={lineWidth}
        min="1"
        max="20"
        onChange={handleLineWidthChange}
      />
    </div>
  );
}

export default Controls;

Let’s break down the `Controls` component:

  • `useState` Hooks: We use `useState` to manage the selected color (`selectedColor`) and line width (`lineWidth`).
  • `onColorChange` and `onLineWidthChange` Props: These props are functions passed from the parent component (`App.js`). They allow the `Controls` component to communicate the selected color and line width to the `Canvas` component.
  • Event Handlers: `handleColorChange` and `handleLineWidthChange` update the component’s state and call the respective prop functions to notify the parent component of the changes.
  • Input Elements: The component renders a color picker (`<input type=”color”>`) and a number input (`<input type=”number”>`) for the user to select the color and line width.

Now, we need to modify `App.js` to:

  • Import and render the `Controls` component.
  • Pass the `onColorChange` and `onLineWidthChange` props to the `Controls` component.
  • Manage the color and line width state in `App.js`.
  • Pass the color and line width to the `Canvas` component.

Here’s the updated `App.js` code:

import React, { useState, useRef, useEffect } from 'react';
import Canvas from './Canvas';
import Controls from './Controls';

function App() {
  const [color, setColor] = useState('black');
  const [lineWidth, setLineWidth] = useState(2);
  const canvasRef = useRef(null);

  const handleColorChange = (newColor) => {
    setColor(newColor);
  };

  const handleLineWidthChange = (newLineWidth) => {
    setLineWidth(newLineWidth);
  };

  return (
    <div>
      <h1>Simple Drawing App</h1>
      <Controls onColorChange={handleColorChange}
                onLineWidthChange={handleLineWidthChange} />
      <Canvas color={color} lineWidth={lineWidth} />
    </div>
  );
}

export default App;

Next, we need to modify the `Canvas.js` component to receive the `color` and `lineWidth` props and apply them to the drawing context. Here’s the updated `Canvas.js`:

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

function Canvas({ color, lineWidth }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    // Set initial canvas properties
    context.strokeStyle = color;  // Use the color prop
    context.lineWidth = lineWidth;  // Use the lineWidth prop

    let isDrawing = false;

    const startDrawing = (e) => {
      isDrawing = true;
      draw(e);
    };

    const stopDrawing = () => {
      isDrawing = false;
      context.beginPath(); // Reset the path when the mouse is released
    };

    const draw = (e) => {
      if (!isDrawing) return;

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

      context.strokeStyle = color; // Set color on each draw
      context.lineWidth = lineWidth; // Set line width on each draw
      context.lineTo(x, y);
      context.stroke();
      context.beginPath(); // Start a new path for each line segment
      context.moveTo(x, y);
    };

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseout', stopDrawing);

    return () => {
      // Clean up event listeners when the component unmounts
      canvas.removeEventListener('mousedown', startDrawing);
      canvas.removeEventListener('mouseup', stopDrawing);
      canvas.removeEventListener('mousemove', draw);
      canvas.removeEventListener('mouseout', stopDrawing);
    };
  }, [color, lineWidth]); // Re-run effect when color or lineWidth changes

  return (
    <canvas
      ref={canvasRef}
      width={600}
      height={400}
      style={{ border: '1px solid black' }}
    />
  );
}

export default Canvas;

Key changes in `Canvas.js`:

  • Props: The `Canvas` component now receives `color` and `lineWidth` as props.
  • Setting Context Properties: We set `context.strokeStyle` and `context.lineWidth` to the prop values. Crucially, we update these properties *inside* the `draw` function as well, so that the color and line width are applied immediately when the user changes them.
  • Dependency Array: The `useEffect` dependency array now includes `color` and `lineWidth`. This ensures that the effect re-runs whenever the color or line width changes, updating the canvas settings.

Now, when you run your app, you should see a color picker and a line width input. Changing these values should update the drawing color and line width immediately.

Adding a Clear Button

Let’s add a “Clear” button to our app to erase the canvas content. This will require another component, or we can add it to the `Controls` component.

Let’s add the clear button functionality to the `Controls` component. Modify `Controls.js` as follows:

import React, { useState } from 'react';

function Controls({ onColorChange, onLineWidthChange, onClearCanvas }) {
  const [selectedColor, setSelectedColor] = useState('black');
  const [lineWidth, setLineWidth] = useState(2);

  const handleColorChange = (e) => {
    const newColor = e.target.value;
    setSelectedColor(newColor);
    onColorChange(newColor);
  };

  const handleLineWidthChange = (e) => {
    const newLineWidth = parseInt(e.target.value, 10);
    setLineWidth(newLineWidth);
    onLineWidthChange(newLineWidth);
  };

  const handleClearCanvas = () => {
    onClearCanvas();
  };

  return (
    <div style={{ marginBottom: '10px' }}>
      <label htmlFor="colorPicker">Color: </label>
      <input
        type="color"
        id="colorPicker"
        value={selectedColor}
        onChange={handleColorChange}
        style={{ marginRight: '10px' }}
      />

      <label htmlFor="lineWidth">Line Width: </label>
      <input
        type="number"
        id="lineWidth"
        value={lineWidth}
        min="1"
        max="20"
        onChange={handleLineWidthChange}
      />

      <button onClick={handleClearCanvas} style={{ marginLeft: '10px' }}>Clear</button>
    </div>
  );
}

export default Controls;

Key changes in `Controls.js`:

  • `onClearCanvas` Prop: We add a new prop, `onClearCanvas`, which will be a function passed from the parent component (`App.js`).
  • `handleClearCanvas` Function: This function calls the `onClearCanvas` prop function when the button is clicked.
  • Clear Button: We add a `<button>` with an `onClick` handler that calls `handleClearCanvas`.

Now, we need to update `App.js` to:

  • Pass the `onClearCanvas` prop to the `Controls` component.
  • Create a `handleClearCanvas` function that clears the canvas.

Modify `App.js` as follows:

import React, { useState, useRef, useEffect } from 'react';
import Canvas from './Canvas';
import Controls from './Controls';

function App() {
  const [color, setColor] = useState('black');
  const [lineWidth, setLineWidth] = useState(2);
  const canvasRef = useRef(null);

  const handleColorChange = (newColor) => {
    setColor(newColor);
  };

  const handleLineWidthChange = (newLineWidth) => {
    setLineWidth(newLineWidth);
  };

  const handleClearCanvas = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
  };

  return (
    <div>
      <h1>Simple Drawing App</h1>
      <Controls
        onColorChange={handleColorChange}
        onLineWidthChange={handleLineWidthChange}
        onClearCanvas={handleClearCanvas}
      />
      <Canvas color={color} lineWidth={lineWidth} ref={canvasRef} />
    </div>
  );
}

export default App;

Key changes in `App.js`:

  • `handleClearCanvas` Function: This function gets the 2D rendering context of the canvas and uses `context.clearRect()` to clear the entire canvas.
  • Passing `onClearCanvas` Prop: We pass the `handleClearCanvas` function as the `onClearCanvas` prop to the `Controls` component.
  • `ref` to Canvas: We pass a `ref` to the `Canvas` component so that we can access the canvas element in `handleClearCanvas`.

Now, your drawing app should have a “Clear” button that erases the drawings on the canvas.

Addressing Common Mistakes and Improvements

Here are some common mistakes and potential improvements for this project:

  • Performance: For more complex drawings or larger canvases, consider optimizing the drawing performance. One way to do this is to only redraw the parts of the canvas that have changed. Another approach is to use a more performant drawing library.
  • Responsiveness: The canvas size is currently fixed. You can make the canvas responsive by setting its width and height to a percentage of the parent container’s size.
  • Error Handling: Add error handling to gracefully handle unexpected situations, such as the canvas context not being available.
  • Undo/Redo Functionality: Implement undo and redo functionality by storing the drawing commands or canvas snapshots in an array.
  • Saving Drawings: Add the ability to save the drawings as images. This can be done using the `canvas.toDataURL()` method to get a data URL of the image and then allowing the user to download it.
  • Touch Support: Add support for touch events (e.g., `touchstart`, `touchmove`, `touchend`) to make the app work on touch-enabled devices.

Common Mistakes:

  • Incorrect Event Listener Attachments/Removals: Make sure event listeners are attached and removed correctly to avoid memory leaks. The `useEffect` hook with the cleanup function is crucial for this.
  • Incorrect Coordinate Calculations: Ensure you’re calculating the mouse coordinates correctly relative to the canvas. The `getBoundingClientRect()` method is essential for this.
  • Forgetting to Update Canvas Properties: Remember to update the `strokeStyle` and `lineWidth` properties inside the `draw` function to reflect the current color and line width selected by the user.
  • Not Using the Dependency Array: Incorrect or missing dependency arrays in `useEffect` can lead to unexpected behavior. Make sure you include all the dependencies (like `color` and `lineWidth`) that your effect relies on.

Key Takeaways

  • Component-Based Architecture: React makes it easy to break down complex UIs into reusable components.
  • State Management: Understanding how to manage state with `useState` is fundamental in React.
  • Event Handling: React provides a straightforward way to handle user interactions through event listeners.
  • DOM Manipulation: Interacting with the DOM, especially the canvas element, opens up a world of possibilities for creating interactive applications.
  • useEffect Hook: The `useEffect` hook is a powerful tool for managing side effects, such as setting up event listeners and performing cleanup.

FAQ

Here are some frequently asked questions about this project:

  1. How can I change the background color of the canvas? You can set the background color of the canvas by setting the `fillStyle` property of the context within the `useEffect` hook, before drawing any lines. For example: `context.fillStyle = ‘lightgray’; context.fillRect(0, 0, canvas.width, canvas.height);` Make sure this code comes before your drawing logic.
  2. How do I add different shapes (e.g., circles, rectangles)? You can add different shapes by using the appropriate methods of the 2D rendering context (e.g., `context.arc()` for circles, `context.fillRect()` for rectangles). You’ll need to modify the `draw` function to handle different drawing modes.
  3. How can I make the drawing smoother? The basic implementation uses `lineTo` which, by default, can create slightly jagged lines. For smoother lines, experiment with quadratic or cubic Bézier curves (using `context.quadraticCurveTo()` or `context.bezierCurveTo()`). Also, consider increasing the line width and adjusting the drawing logic.
  4. How can I add different tools (e.g., eraser, different brush styles)? You would need to add a tool selection UI (using radio buttons, dropdowns, etc.) and modify the `draw` function to apply different drawing logic based on the selected tool. For example, for an eraser, you would set the `strokeStyle` to the background color.

This simple drawing app is a solid foundation for your React journey. As you practice and experiment with the concepts presented here, you’ll gain a deeper understanding of React and be able to build increasingly complex and interactive applications. The key is to practice, experiment, and don’t be afraid to try new things. Keep building, keep learning, and enjoy the process of creating!

More posts