Next.js: Build an Interactive Simple Web-Based Drawing App

Written by

javascriptdebugged

in

Ever wanted to create your own web-based drawing tool? Something simple, yet functional, that allows you to unleash your inner artist directly in your browser? In this tutorial, we’ll dive into building precisely that using Next.js, a powerful React framework that simplifies web development. We’ll craft a user-friendly drawing app from scratch, perfect for beginners and intermediate developers looking to expand their skills. This project is a fantastic way to learn about handling user input, manipulating the DOM, and managing state in a React environment.

Why Build a Drawing App?

Building a drawing app offers several benefits:

  • Practical Application: You’ll learn how to handle mouse and touch events, fundamental to interactive web applications.
  • DOM Manipulation: You’ll directly interact with the Document Object Model (DOM) to draw shapes and lines.
  • State Management: You’ll understand how to manage the app’s state, such as the current color, line width, and drawn shapes.
  • Fun and Engaging: It’s a fun project that allows you to see immediate results and express your creativity.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): You’ll need these to manage project dependencies. Download and install them from the official Node.js website.
  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages is helpful, but we’ll explain concepts as we go.
  • A code editor: Visual Studio Code, Sublime Text, or Atom are all excellent choices.

Setting Up the Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app drawing-app

This command creates a new directory called drawing-app with all the necessary files. Navigate into the project directory:

cd drawing-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page.

Project Structure

Let’s take a quick look at the project structure:

  • pages/index.js: This is the main page of our application. We’ll write the drawing app’s code here.
  • styles/globals.css: This file holds global CSS styles.
  • public/: This folder is for static assets like images.

Building the Drawing Canvas

First, let’s create the canvas where users will draw. Open pages/index.js and replace the existing code with the following:

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

export default function Home() {
  const canvasRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [color, setColor] = useState('black');
  const [lineWidth, setLineWidth] = useState(5);
  const [prevPos, setPrevPos] = useState({ x: 0, y: 0 });

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

    if (context) {
      context.lineCap = 'round'; // makes the line ends rounded
    }
  }, []);

  const startDrawing = (e) => {
    const { offsetX, offsetY } = getCoordinates(e);

    setIsDrawing(true);
    setPrevPos({ x: offsetX, y: offsetY });
  };

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

    const { offsetX, offsetY } = getCoordinates(e);
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    if (context) {
      context.strokeStyle = color;
      context.lineWidth = lineWidth;
      context.beginPath();
      context.moveTo(prevPos.x, prevPos.y);
      context.lineTo(offsetX, offsetY);
      context.stroke();

      setPrevPos({ x: offsetX, y: offsetY });
    }
  };

  const stopDrawing = () => {
    setIsDrawing(false);
  };

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

  const getCoordinates = (e) => {
    // Handle both mouse and touch events
    return {
      offsetX: e.nativeEvent.offsetX !== undefined ? e.nativeEvent.offsetX : e.touches[0].clientX - e.target.offsetLeft,
      offsetY: e.nativeEvent.offsetY !== undefined ? e.nativeEvent.offsetY : e.touches[0].clientY - e.target.offsetTop,
    };
  };

  return (
    <div>
      {`
        body {
          margin: 0;
          overflow: hidden; /* Prevent scrollbars */
        }
      `}
      <div style="{{">
        <h1>Simple Drawing App</h1>

        <div style="{{">
          <label>Color:</label>
           setColor(e.target.value)}
          />
          <label style="{{">Line Width:</label>
           setLineWidth(parseInt(e.target.value, 10))}
          />
          <button style="{{">Clear</button>
        </div>

        
      </div>
    </div>
  );
}

Let’s break down this code:

  • Import statements: We import useRef, useState, and useEffect from React.
  • canvasRef: This is a React ref, which allows us to directly access the DOM element for the canvas.
  • isDrawing: A state variable that tracks whether the user is currently drawing.
  • color: Stores the currently selected drawing color.
  • lineWidth: Stores the current line width.
  • prevPos: Stores the previous mouse/touch coordinates to draw lines between points.
  • useEffect: This hook runs once when the component mounts. We use it to set the lineCap of the canvas context to ’round’, which makes the lines have rounded ends.
  • startDrawing: This function is called when the user presses the mouse button or touches the screen. It sets isDrawing to true and records the starting coordinates. The getCoordinates function handles both mouse and touch events, calculating the correct offset.
  • draw: This function is called when the mouse moves or the user’s finger moves on the screen while drawing. It checks if isDrawing is true, and if so, it draws a line from the previous position to the current position.
  • stopDrawing: This function is called when the user releases the mouse button or lifts their finger. It sets isDrawing to false.
  • clearCanvas: This function clears the entire canvas.
  • getCoordinates: This function handles both mouse and touch events, calculating the correct offset.
  • JSX Structure: We have a div with a title, color and line width input, a clear button, and the canvas element. The canvas has event listeners for mouse and touch events.

Let’s add some basic styling to globals.css:

/* styles/globals.css */
body {
  font-family: sans-serif;
}

Now, save the files and refresh your browser. You should see a blank canvas with a black border. You can’t draw yet, but the canvas is ready!

Adding Drawing Functionality

Now, let’s implement the core drawing functionality. The draw function is where the magic happens. We’ll use the canvas 2D rendering context to draw lines.

Inside the draw function, we access the canvas context using canvasRef.current.getContext('2d'). We then set the strokeStyle (the color of the line), lineWidth, and call beginPath(), moveTo(), lineTo(), and stroke() to draw the line.

The startDrawing and stopDrawing functions control when we’re drawing. The startDrawing function captures the starting position, and stopDrawing stops the drawing process.

The clearCanvas function clears the canvas by using the clearRect() method.

Implementing Color and Line Width Controls

Let’s add color and line width controls to our app. We’ll use HTML input elements of type color and number, and bind their values to our state variables color and lineWidth. When the user changes the color or line width, the corresponding state variable is updated, and the drawing functionality will use those new values.

We’ve already added the input elements and the event listeners in the code above. The onChange event handlers update the color and lineWidth states.

Handling Touch Events for Mobile Devices

To make our drawing app work on mobile devices, we need to handle touch events. We’ll use the same logic as for mouse events, but with touch-specific event handlers.

We’ve already included the touch event handlers in our code: onTouchStart, onTouchMove, and onTouchEnd. Inside these handlers, we call the appropriate functions (startDrawing, draw, and stopDrawing) to handle the touch input.

The getCoordinates function is crucial for handling touch events correctly. It checks if the event is a mouse event or a touch event and calculates the correct coordinates accordingly. For touch events, it subtracts the element’s offset to get the correct position relative to the canvas.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Not initializing the canvas context: Make sure to get the 2D rendering context using canvas.getContext('2d'). If you forget this, you won’t be able to draw anything. We do this inside the useEffect hook.
  • Incorrect event handling: Ensure you’re using the correct event listeners (onMouseDown, onMouseMove, onMouseUp for mouse events; onTouchStart, onTouchMove, onTouchEnd for touch events).
  • Incorrect coordinate calculations: When handling touch events, make sure to calculate the correct coordinates relative to the canvas. The getCoordinates function helps with this.
  • Forgetting to call beginPath(): Before drawing a new line, you must call beginPath() to start a new path.
  • Incorrectly setting lineCap: The lineCap property controls the appearance of the line endings. Setting it to ’round’ makes the lines have rounded ends.
  • Not handling onMouseOut: If the user moves the mouse outside the canvas while drawing, the drawing should stop. The onMouseOut event handler in the code addresses this.

Enhancements and Next Steps

Here are some ideas to enhance your drawing app:

  • Add more colors: Implement a color palette for easier color selection.
  • Implement different brush sizes: Allow users to choose from various line widths.
  • Add an eraser: Implement an eraser tool that draws white lines.
  • Add undo/redo functionality: Implement the ability to undo and redo drawing actions.
  • Save and load drawings: Allow users to save their drawings as images and load them back into the app.
  • Add shapes: Implement the ability to draw shapes like rectangles, circles, and triangles.

Key Takeaways

In this tutorial, we’ve built a simple yet functional web-based drawing app using Next.js. We’ve covered:

  • Setting up a Next.js project.
  • Creating a drawing canvas and handling mouse/touch events.
  • Implementing color and line width controls.
  • Handling touch events for mobile devices.
  • Understanding common mistakes and how to fix them.

FAQ

Q: How can I deploy this app?

A: You can deploy your Next.js app to platforms like Vercel (which is recommended for Next.js), Netlify, or other hosting providers. You’ll typically just need to build your app using npm run build and then deploy the contents of the .next directory.

Q: How do I add different brush sizes?

A: You can add another input element (e.g., a select dropdown or a range slider) to allow the user to select the line width. Bind the value of this input to the lineWidth state variable.

Q: How can I add an eraser tool?

A: You can create an eraser by setting the strokeStyle to the background color (e.g., white) when the eraser tool is selected.

Q: My drawing isn’t smooth. How can I improve it?

A: Ensure you’re using lineCap = 'round' for smoother lines. You might also consider using a higher lineWidth value for a more noticeable effect. For very high-performance requirements and smoother drawing, consider using techniques like requestAnimationFrame to optimize the drawing process, though this is less critical for a simple drawing app.

Q: How can I add a background color to my canvas?

A: Inside the useEffect hook, after getting the 2D rendering context, you can set the canvas’s background color. For example: `context.fillStyle = ‘lightgray’; context.fillRect(0, 0, canvas.width, canvas.height);` This will fill the canvas with a light gray background before any drawing occurs.

Building a drawing app in Next.js offers a fantastic opportunity to solidify your understanding of React and web development fundamentals. With the ability to interact directly with the DOM and handle user input, you gain practical experience that extends well beyond this specific project. From handling mouse and touch events to managing state, this project provides a solid foundation for more complex web applications. The clear structure of Next.js, along with the interactive nature of the drawing tool, makes it an excellent choice for learning and experimenting. As you build and refine your drawing app, you’ll not only create something useful but also significantly enhance your skills as a web developer.

More posts