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

In this comprehensive tutorial, we will teach you how to create a functionality where you can add or write a text in H5ML5 Canvas surface in React js functional component.

HTML5 Canvas has been in a trend for a while. It was a revolutionary technology when it was launched.

It helps to create dynamic graphics, visual effects with the help of JavaScript.

It gives us the drawing surface that permits you build the complex graphics and shapes.

In this guide, we will understand the basics of how to create a canvas surface and how to write text on the canvas surface in React.

It is very easy to create canvas using HTML markup.

React Js Write Text on HTML5 Canvas Example

To create an HTML5 canvas surface and write text in React, you can follow these steps:

• 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

Conclusion

In this tutorial, we have learned how to work with HTML5 Canvas. We used the 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 Cavas tutorial will help you.