Downloading picture with text in ReactJS

In your code the texts are distinct elements (childs of the div's in below code):

            <CardMedia
              component="img"
              image = {this.props.imageIn}
            />
            <div style={{position: 'absolute', color: 'white', top: '5%', left: '50%', transform:'translateX(-50%)'}}>
              {this.props.topText}
            </div>

            <div style={{position: 'absolute', color: 'white', bottom: '5%', left: '50%', transform:'translateX(-50%)'}}>
              {this.props.bottomText}
            </div>
          </div>

Rather you may try to incorporate the text into image like:

    const canvas = this.refs.canvas;
    const ctx = canvas.getContext("2d");
    const img = this.refs.image;

    img.onload = () => {
      ctx.drawImage(img, 0, 0);
      ctx.font = "40px Courier";
      ctx.fillText(this.props.text, 210, 75); // THIS IS THE PLACE TEXT IS EMBEDDED INTO THE PICTURE
    };

In this code sandbox link, https://codesandbox.io/s/blazing-sun-e2bgf , you can find a simple class named Canvas which uses above method so that when the file is saved you can see the text.

One catch here, the example I provided is free from material UI. You are using CardMedia class which takes the image and shows it. But in the example I provided, the method is generic. So you can place the image seperately in the card.

---

Credit: https://blog.cloudboost.io/using-html5-canvas-with-react-ff7d93f5dc76