How to load Image on canvas in React?

Question

How to upload Image to the full width/height of the canvas in React? for example:

 class PlanPage extends Component { constructor(props) { super(props); } componentWillMount() { this.setState({ canvasA: { canvasWidth: 800, canvasHeight: 600 } }) } componentDidMount() { this.props.getDataMap(); //return object which has the fields eg id,... and field URL which specifies where image is const { canvasWidth, canvasHeight } = this.state.canvasA; this.canvasA.width = canvasWidth; this.canvasA.height = canvasHeight; } ...... <canvas ref={canvasA => this.canvasA = canvasA} /> //canvas 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

will appreciated any help.

Answer 1

You can try something like this

componentDidMount() {
  const context = this.canvasA.getContext('2d');

  const image = new Image();
  image.src = "whereever-you-image-url-live.jpg";
  image.onload = () => {
    context.drawImage(image, 0, 0, this.canvasA.width, this.canvasA.height);
  };
}