Draw a rectangle on Canvas using React

Many developers in ReactJS struggle with the drawing element on canvas therefore we have come up with the new article where we show you how to draw a rectangle on Canvas using React.

Steps to draw a rectangle on Canvas

Create a react application
Add the canvas and initialize the context
Function to draw a rectangle
Function to draw a rectangle with background
Draw rectangles
Output

1. Create a react application

In the first step, we’ll create a react application using `create-react-app`. If you don’t know how to implement a react application then refer to this link.

2. Add the canvas and initialize the context

Let’s render the canvas element in the DOM and initialize the context of the canvas.

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

function App() {
  const canvas = useRef();
  let ctx = null;

  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;

    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);

  return (
    <div class="App">
      <h3>Draw a rectangle on Canvas - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <canvas ref={canvas}></canvas>
    </div>
  );
}

export default App;

Here we have used the `useRef` and `useEffect` hooks to manage the canvas element. Check out the more example of the React Hooks">React Hooks.

You can also see that we have set the width and height of the canvas and initialize the context for further use.

Use the following style to design a canvas.

.App {
  margin: 30px;
}

canvas {
  width: 400px;
  height: 300px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

3. Function to draw a rectangle

Now we’ll write a function to draw a rectangle on Canvas using react code.

// draw rectangle
const drawRect = (info, style = {}) => {
  const { x, y, w, h } = info;
  const { borderColor = 'black', borderWidth = 1 } = style;

  ctx.beginPath();
  ctx.strokeStyle = borderColor;
  ctx.lineWidth = borderWidth;
  ctx.rect(x, y, w, h);
  ctx.stroke();
}

In the above code, we are handling two different parameters such as `info` and `style` to draw a rectangle using the `rect` method.

We’ll use the `x`, `y`, `w` as width and `h` as height from the `info`. We will also use the `borderColor` and `borderWidth` from the `style` to decorate the rectangle.

4. Function to draw a rectangle with background

Let’s write one more function to draw a rectangle with background color.

// draw rectangle with background
const drawFillRect = (info, style = {}) => {
  const { x, y, w, h } = info;
  const { backgroundColor = 'black' } = style;

  ctx.beginPath();
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(x, y, w, h);
}

Same as the previous function, we will use the two different parameters `info` and `style`. But here we will use the `fillRect` method to draw a filled rectangle.

5. Draw rectangles

We’ll use the above two functions to draw rectangles on page load.

useEffect(() => {
  const r1Info = { x: 20, y: 30, w: 100, h: 50 };
  const r1Style = { borderColor: 'red', borderWidth: 10 };
  drawRect(r1Info, r1Style);

  const r2Info = { x: 100, y: 100, w: 80, h: 150 };
  drawRect(r2Info);

  const r3Info = { x: 250, y: 80, w: 80, h: 120 };
  drawFillRect(r3Info, { backgroundColor: 'green' });

  const r4Info = { x: 200, y: 220, w: 100, h: 50 };
  drawFillRect(r4Info);
}, []);

6. Output

Let’s combine all code together and see how it looks.

App.js

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

function App() {
  const canvas = useRef();
  let ctx = null;

  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;

    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);

  useEffect(() => {
    const r1Info = { x: 20, y: 30, w: 100, h: 50 };
    const r1Style = { borderColor: 'red', borderWidth: 10 };
    drawRect(r1Info, r1Style);

    const r2Info = { x: 100, y: 100, w: 80, h: 150 };
    drawRect(r2Info);

    const r3Info = { x: 250, y: 80, w: 80, h: 120 };
    drawFillRect(r3Info, { backgroundColor: 'green' });

    const r4Info = { x: 200, y: 220, w: 100, h: 50 };
    drawFillRect(r4Info);
  }, []);

  // draw rectangle
  const drawRect = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { borderColor = 'black', borderWidth = 1 } = style;

    ctx.beginPath();
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
    ctx.rect(x, y, w, h);
    ctx.stroke();
  }

  // draw rectangle with background
  const drawFillRect = (info, style = {}) => {
    const { x, y, w, h } = info;
    const { backgroundColor = 'black' } = style;

    ctx.beginPath();
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(x, y, w, h);
  }

  return (
    <div class="App">
      <h3>Draw a rectangle on Canvas - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <canvas ref={canvas}></canvas>
    </div>
  );
}

export default App;

Run the project and check the output in the browser.

Output - Draw a rectangle on Canvas using React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project