title: React HTML Canvas Not Updating
body: <p>I have this code in DrawingCanvas.jsx:</p>
  
  <pre><code>var _ = require('bower.js').lodash;
  var React = require('bower.js').React;
  var channel = require('com.js').channel;
  
  var DrawingCanvas = React.createClass({
    setCanvasImage: function(){
      if(this.props.image != null)
      {
        //var canvas = React.findDOMNode(this.refs.canvas); // React 0.13 +
        var canvas = this.refs.canvas.getDOMNode();
        var context = canvas.getContext("2d");
        var image = new Image(100,100);
        image.src = 'data:image/png;base64,' + btoa(this.props.image);
        context.drawImage(image, 10, 10);
      }
    },
    componentWillUpdate: function(nextProps, nextState){
      this.setCanvasImage();
    },
    render: function(){
      return (
        &lt;div&gt;
          &lt;canvas ref="canvas" height={this.props.height} width={this.props.width} className="drawing-canvas"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      );
    }
  });
  
  module.exports = DrawingCanvas;
  </code></pre>
  
  <p>Where I want to update the canvas when <code>this.props.image</code> is updated (received from server. I have verified that I receive the image from the server. Here also is my app.jsx code:</p>
  
  <pre><code>var Oboe = require('bower.js').pOboe;
  var channel = require('com.js').channel;
  
  var DrawingCanvas = require('components/DrawingCanvas.jsx');
  
  var cfg = {
    rootApiUrl: 'http://localhost:55474/'
    //rootApiUrl: 'http://trussmgmtdevserver.azurewebsites.net/'
  };
  
  var getParameterByName = function(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&amp;]" + name + "=([^&amp;#]*)"),
          results = regex.exec(location.search);
      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  
  var appState = {
      image: null
  }
  
  var subscriptions = {
      image: {
          received: channel.sub('image.received', function (image) {
              appState.image = image;
              console.log("RCVD");
          })
      }
  };
  
  var renderDrawingCanvas = function (user) {
    React.render(&lt;DrawingCanvas image={appState.image} height={90} width={90}/&gt;, document.querySelector('.canvas-anchor'));
  };
  
  renderDrawingCanvas();
  
  Oboe({
          url: cfg.rootApiUrl + 'api/pdfFile/edit?pdfFileId=' + getParameterByName("pdfFileId"),
          method: 'GET'
        }).then(function (data) {
          channel.pub('image.received', data.imageData);
        })
          .catch(function (err) {
            console.error(err);
          });
  </code></pre>
  
  <p>I receive no console errors, yet I do not see the canvas element updating. I set a breakpoint on <code>setCanvasImage</code> that doesn't get hit. Is <code>componentWillUpdate</code> (which calls <code>setCanvasImage</code>) not being hit for some reason? What can I do to make my canvas element update based on the updated props? Thanks in advance.</p>
  
  <p>Edit:</p>
  
  <p>Not a duplicate of <a href="https://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue">this question</a>. Though that question was instructive, I'm not loading an image from a url, but from base64 image data. Yes, via the Oboe request, but the problem is not that the server isn't providing the image data. It is, as stated in the question. The image data is already there, it doesn't have to be loaded. Yes, it's not there on the initial build of the React component because the Oboe request is in progress, but that comes down to when and how to call <code>setCanvasImage</code> which is the essence of this question. It is not a duplicate because the other question does not address this in a reactive programming context.</p>