How to Write or Add a Text in HTML5 Canvas in React 18

Last Updated on by in React JS

HTML5 Canvas and React, together, offer greater flexibility for creating dynamic and interactive web applications, resulting in immersive graphics on web pages that enhance the beauty and visual appeal of your application.

In this guide, we will learn bit-by-bit how to create and manipulate text within the canvas surface using React and HTML5 Canvas APIs.

Our simple guide aims to give you an understanding of integrating Canvas into a React project in combination with HTML5 Canvas. It offers powerful APIs to provide developers with a diverse array of options to create any type of screen with mesmerizing animations, including writing text on canvas surfaces.

The HTML5 Canvas is empowered by JavaScript and provides a platform for rendering graphics, including text, on a web page. It allows for dynamic, scriptable rendering of 2D shapes, images, and text that demonstrates immersive web experiences.

React Js Write Text on HTML5 Canvas Example

Follow the give series of steps to incorporate HTML5 Canvas into a React application and writing text on a canvas surface through the React platform.

  • Step 1: Create React Project
  • Step 2: Install Bootstrap Library
  • Step 3: Build Functional Component
  • Step 4: Add Text in Canvas
  • Step 5: Update App Js File
  • Step 6: View App on Browser

Create React Project

In the fist step, we will see how to create a new React project using CRA tool.

Type the below command on the command-prompt and hit enter.

npx create-react-app my-react-app

Move into the project folder.

cd my-react-app

Install Bootstrap Library

To design the UI component faster we are using Bootstrap CSS framework.

You have to execute the given command to add the module to the React app.

npm i bootstrap --legacy-peer-deps

Build Functional Component

Next, make the new directory, name it components/. Also, create the CanvasFile.js file in this folder.

Update components/CanvasFile.js file with given code.

import React from 'react'

function CanvasFile() {
  return (
    <div></div>
  )
}

export default CanvasFile

Add Text in Canvas

The useRef, and useEffect hooks are essential ingredients of this functionality.

You have to use these hooks to access the dom properties; the addText function is helping to add text on canvas surface.

Update components/CanvasFile.js file with given code.

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

function CanvasFile() {
  const canvasSurface = useRef();
  let contextVal = null;

  useEffect(() => {
    const canvasVal = canvasSurface.current;
    canvasVal.width = canvasVal.clientWidth;
    canvasVal.height = canvasVal.clientHeight;

    contextVal = canvasVal.getContext("2d");
  }, []);

  useEffect(() => {
    addText(
      { text: "The canvas board! ", x: 200, y: 100 },
      { fontSize: 30, color: "red", textAlign: "right" },
    );

    addText(
      { text: "Text on Canvas", x: 100, y: 50 },
      { fontSize: 35, color: "blue", textAlign: "center" },
    );
  }, []);

  const addText = (data, style = {}) => {
    const { text, x, y } = data;
    const {
      fontSize = 30,
      fontFamily = "Arial",
      color = "red",
      textAlign = "center",
      textBaseline = "top",
    } = style;

    contextVal.beginPath();
    contextVal.textAlign = textAlign;
    contextVal.fillStyle = color;
    contextVal.textBaseline = textBaseline;
    contextVal.fillText(text, x, y);
    contextVal.font = fontSize + "px " + fontFamily;
    contextVal.stroke();
  };

  return (
    <div>
      <canvas ref={canvasSurface}></canvas>
    </div>
  );
}

export default CanvasFile;

Update App Js File

Open the App.js file; next, you have to import the CanvasFile component; make sure to define the component in the app method.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import CanvasFile from "./components/CanvasFile";

function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Add Text to HTML5 Canvas Example</h2>
      <CanvasFile />
    </div>
  );
}

export default App;

View App on Browser

We can now test the feature; for that you have to invoke the React server.

npm start

After the development server runs; your React app will be served on:

http://localhost:3000

How to Write or Add a Text in HTML5 Canvas in React

Conclusion

In this tutorial, we have learned how to work with HTML5 Canvas, learned how to use React hooks to write text on Canvas panel.

We comprehended how to design the HTML5 canvas in React function component using hooks.

We hope this React HTML5 Cavnas tutorial will help you.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.