Revision history [back]

To write text using state information in React canvas, you can follow these steps:

1. Create a class component that extends React.Component and has a canvas ref.

class CanvasText extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
  }

  componentDidMount() {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText(this.props.text, 10, 50); // use props.text instead of state
  }

  render() {
    return <canvas ref={this.canvasRef} />;
  }
}

1. In the componentDidMount method, get the canvas context and set its font. Then use ctx.fillText to write the text at a specific position.

2. Replace the text with a state variable that can be updated.

class CanvasText extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
    this.state = { text: "Hello, World!" };
  }

  componentDidMount() {
    this.updateCanvas();
  }

  componentDidUpdate() {
    this.updateCanvas();
  }

  updateCanvas() {
    const canvas = this.canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "30px Arial";
    ctx.fillText(this.state.text, 10, 50); // use state.text instead of props.text
  }

  render() {
    return (
      <div>
        <canvas ref={this.canvasRef} />
        <input
          type="text"
          value={this.state.text}
          onChange={(event) => this.setState({ text: event.target.value })}
        />
      </div>
    );
  }
}

1. Add an input field to allow the user to update the text. When the state changes, call the updateCanvas method to redraw the canvas with the updated text.

2. Done! Now the canvas will update in real-time based on the state of the component.