How to Create Rounded Rectangle on Canvas with React

In this detailed guide, we will show you how to draw a rounded rectangle shape on HTML5 Canvas in React js using JavaScript canvas methods.

HTML Canvas is a powerful element in HTML that allows you to draw graphics, create animations, and build interactive applications directly within a web page using JavaScript.

The canvas is a rectangular area on a web page that you can draw on using a scripting language such as JavaScript.

To create the canvas in React, you must create a canvas element using HTML canvas tag.

Here’s is how a canvas element is added to the HTML template.

<canvas id="myCanvas" width="279" height="200"></canvas>

Creating a rounded rectangle on a canvas in React is a straightforward process that involves using the canvas API to draw a rectangle with rounded corners.

React Draw Rounded Rectangle Shape on Canvas Example

We are going to break down the entire process into the several steps:

• Step 1: Build React Project
• Step 2: Install Bootstrap Library
• Step 3: Create Function Component
• Step 4: Draw Rounded Rectangle on Canvas
• Step 5: Update App Js File
• Step 6: Start React Server

Build React Project

First, go to your terminal or command prompt and create a new project directory. You can do this using the following command:

npx create-react-app my-react-app

Navigate into the new directory:

cd my-react-app

Install Bootstrap Library

This step is optional! you can invoke the below command to install Bootstrap in your React project:

npm install bootstrap --legacy-peer-deps

Create Function Component

In this example, we are going to build a function component called “CanvasBoard”.

Create a new components/ folder, also build a CanvasBoard.js file.

import React from 'react'
function CanvasBoard() {
  return (
    <div></div>
  )
}
export default CanvasBoard

Draw Rounded Rectangle on Canvas

The following code comprises of creating a rounded rectangle in function component, getting its context, setting the fill and stroke styles, and using the arcTo() method to draw the rounded corners.

Add the given code inside the components/CanvasBoard.js file.

import React, { useEffect, useRef } from "react";
export default function CanvasBoard() {
  let canvasRef = useRef();
  let canvasContext = null;
  useEffect(() => {
    let dynamicWh = canvasRef.current;
    dynamicWh.width = dynamicWh.clientWidth;
    dynamicWh.height = dynamicWh.clientHeight;
    canvasContext = dynamicWh.getContext("2d");
  }, []);
  useEffect(() => {
    let cRrOneData = { x: 30, y: 40, w: 90, h: 60 };
    let cRrOneRadius = { tr: 7, br: 50, bl: 2, tl: 0 };
    canvasRoundRec(cRrOneData, cRrOneRadius, "pink");
    let cRrTwo = { x: 170, y: 60, w: 80, h: 50 };
    let cRrTwoRadius = { tr: 22, br: 22, bl: 22, tl: 22 };
    canvasRoundRec(cRrTwo, cRrTwoRadius, "white");
  }, []);
  let canvasRoundRec = (
    data,
    radius = { tr: 4, br: 4, bl: 4, tl: 4 },
    color = "#eee",
  ) => {
    let { x, y, w, h } = data;
    let r = x + w;
    let b = y + h;
    canvasContext.beginPath();
    canvasContext.fillStyle = color;
    canvasContext.moveTo(x + radius.tl, y);
    canvasContext.lineTo(r - radius.tr, y);
    canvasContext.quadraticCurveTo(r, y, r, y + radius.tr);
    canvasContext.lineTo(r, y + h - radius.br);
    canvasContext.quadraticCurveTo(r, b, r - radius.br, b);
    canvasContext.lineTo(x + radius.bl, b);
    canvasContext.quadraticCurveTo(x, b, x, b - radius.bl);
    canvasContext.lineTo(x, y + radius.tl);
    canvasContext.quadraticCurveTo(x, y, x + radius.tl, y);
    canvasContext.stroke();
    canvasContext.fill();
    canvasContext.closePath();
  };
  return (
    <>
      <canvas ref={canvasRef}></canvas>
    </>
  );
}

Update App Js File

In React, you can add a component by importing it and rendering it in another component.

Hence, open the App.js file and add the given code into the file.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import CanvasBoard from "./components/CanvasBoard";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Canvas Rounded Rectangle Example</h2>
      <CanvasBoard />
    </div>
  );
}
export default App;

Start React Server

Type the given command onto the terminal’s console and run the react server.

npm start

The react server will open the app on the given url:

http://localhost:3000

Summary

Overall, creating custom shapes on a canvas in React offers a flexible way to add custom graphics and visualizations to React js app.

This the process can quite easily be adapted to create a wide range of shapes and designs.

In this tutorial, we learned how to create a canvas reusable component.

Not just that but we also looked at how to comfortably draw rounded rectangle in React.