How to load an image into canvas?

Question

Canvas

How to load Image to full width/height of 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();  // возвращает объект с полями id,..,URL где лежит картинка
    const { canvasWidth, canvasHeight } = this.state.canvasA;
    this.canvasA.width = canvasWidth;
    this.canvasA.height = canvasHeight;
  }
......
<canvas
  ref={canvasA => this.canvasA = canvasA} /> //сам канвас

Answer 1

You can access the canvas via: this.refs.canvasA, then work as usual, react should no longer appear in the question here. (i.e. call getContext, call drawImage .... )
Example (no react).