How to access canvas context in React

Step 1: Creating the Canvas Component

First, create a React component containing the <canvas> element. You commonly use the ref attribute to directly access the canvas.

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

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

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

            // You can start using the context for drawing here
            context.fillStyle = 'red';
            context.fillRect(10, 10, 50, 50);
        }
    }, []);

    return <canvas ref={canvasRef} />;
}

Step 2: Using the useEffect Hook

In React, the useEffect hook is typically employed for handling side effects, such as DOM manipulation. Here, we use useEffect to access the canvas element after the component's DOM has been mounted. By accessing canvasRef.current, we retrieve the canvas DOM node and then use getContext('2d') to obtain the 2D rendering context.

Step 3: Drawing on the Canvas

Once you have the 2D context context, you can begin drawing. In the example above, we set the fill color to red and draw a rectangle.

Step 4: Integrating into a Larger Application

Typically, your CanvasComponent will be a small part of your React application. You can integrate it into your application just like any other component. For example, you can reference it within a larger UI framework or dynamically change the drawing by passing parameters via props.

jsx
function App() {
    return (
        <div>
            <h1>My Canvas Application</h1>
            <CanvasComponent />
        </div>
    );
}

Summary

By following these steps, you can effectively set up and manipulate the canvas in React. Using ref and useEffect is a standard pattern for handling DOM elements, particularly for HTML elements requiring direct DOM manipulation, such as <canvas>. This approach preserves React's declarative and component-based nature while effectively leveraging JavaScript's ability to directly interact with the DOM.