title: React canvas context.fillRect doesn't work
body: <p>I'd like to draw rect with React,
  is there anything wrong in the following?</p>
  <p>I don't figure out why this code doesn't draw a rect.</p>
  <pre class="lang-js prettyprint-override"><code>
  class GameView{
      constructor(props) {
          this.canvas = React.createRef()
          this.width = 0;
          this.height = 0;
  
          this.canvas_style = {
              width: 600,
              height: 400
          }
  
      }
  
      componentDidMount() {
          this.width = document.body.offsetWidth;
          this.height = document.body.offsetHeight;
  
          this.canvas_style = {
              width: this.width,
              height: this.height
          }
  
          this.context = this.canvas.current.getContext(&quot;2d&quot;);
      }
  
      render() {
          return (
              &lt;canvas id=&quot;game-view&quot; ref={this.canvas} width={this.width} height={this.height} /&gt;
          )
      }
  }
  class View extends GameView {
      constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          super.componentDidMount();
          this.context.fillStyle =  &quot;black&quot;;
          this.context.fillRect(0, 0, 200, 200)
      }
  
      render() {
          return (
              &lt;canvas id=&quot;game-view&quot; ref={this.canvas} width={this.width} height={this.height} style={this.canvas_style} /&gt;
          )
      }
  }
  </code></pre>
  <p>I tried docment.getElementById(&quot;game-view&quot;) but I got the same result</p>