Clear way to use canvas html5 with React without render all canvas shapes all time

Question

Currently, i work on ETL project with Saas platform using React stack. i try to find the clean way to use canvas with React and render juste some shapes of Canvas when the React Render function is called without create a new canvas each time

My idea is to have a component react with JSX like this:

    <MyReactCanvas>
      <MyShape1 positionX= "10", positionY="10">
      <MyShape2>
      <MyGroupShape>
        <MyShape3>
      </MyGroupShape>
    <MyReactCanvas>

My goal is to have something like this : ETL Exemple

If you have some advice, article, code or informations how to use canvas with React

Answer 1

If I understand your question correctly, you are able to use the HTML5 <canvas /> tags and behavior within your React project (if you're using React-Dom). If you have experience working with the HTML5 Canvas in pure HTML, it should be very similar to using it with React and you can place it within your JSX.

For example:

import React from "react";

export default function App() {
  React.useEffect(() => {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  }, []);

  return (
    <div>
      <h1>HTML5 Canvas + React.js</h1>
      <canvas
        id="myCanvas"
        width="200"
        height="100"
        style={{ border: "1px solid #d3d3d3" }}
      >
        Your browser does not support the HTML canvas tag.
      </canvas>
    </div>
  );
}

This example creates a <canvas /> element and draws a line when the <App /> component is rendered. See this stackblitz for a live example.

A recent article "Canvas with React.js" would be a good starting point.