title: How to load Image on canvas in React?
body: <p>How to upload Image to the full width/height of the canvas in React? for example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 e.g. id,... and field URL which specifies where image is  
      const { canvasWidth, canvasHeight } = this.state.canvasA;
      this.canvasA.width = canvasWidth;
      this.canvasA.height = canvasHeight;
    }
  ......
  &lt;canvas
    ref={canvasA =&gt; this.canvasA = canvasA} /&gt; //canvas</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>will appreciated any help.</p>