title: drawImage() in React on Rails not working
body: <p>I'm sorry if this is one of those questions that fundamentally mistakes how React is supposed to work, but I've hit a wall.</p>
  
  <p>I'm building a Rails app using React that is trying to create an HTMLCanvas element, draw a picture onto that canvas, and then update with user input to put text on the image.</p>
  
  <pre><code>class Image extends React.Component {
  
  componentDidMount(){
      this.updateCanvas();
  }
  
  updateCanvas(){
  // var imageObj = new Image();
  // imageObj.src = './app/assets/image.jpg'
  
  &lt;Image ref='imageObj' source={{uri: '/assets/image.jpg'}} style={{width: 40, height: 40}} /&gt;
  
      var ctx = this.refs.canvas.getContext('2d');
  
      ctx.drawImage(this.refs.imageObj, 0, 0);
  }
  
  render() {
      return (
          &lt;canvas ref='canvas' width={867} height={600}/&gt;
      );
  }
  }
  </code></pre>
  
  <p>I've included commented-out code to show other things I've unsuccessfully tried.</p>
  
  <p>And my HTML is:</p>
  
  <pre><code>&lt;%= react_component('Image') %&gt;
  </code></pre>
  
  <p>When I run this, I get: </p>
  
  <p>Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'</p>
  
  <p>Based on <a href="https://stackoverflow.com/questions/22430671/javascript-failed-to-execute-drawimage">this answer</a>, I suspect the issue has to do with the ImageObj.src not being the correct path, not being of the right property, etc., but I'm not sure how to go about it.</p>
  
  <p>Thanks for any help on this!</p>