title: How to get correct width and height for a canvas in react?
body: <p>I am trying to use canvas in React. the following code is supposed to give me a black 800x800 canvas, but for some reason it ignores my dimensions and shows a 300x150 canvas.</p>
  
  <pre><code>import React, {Component} from "react";
  
  class Sample extends Component {
  
      state = {
          canvasWidth: 800,
          canvasHeight: 800
      }
      canvasRef = React.createRef();
  
      componentDidMount() {
          const canvas = this.canvasRef.current;
          const context = canvas.getContext('2d');
          context.fillRect(0, 0, this.state.canvasWidth, this.state.canvasHeight);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;canvas ref={this.canvasRef} /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Sample
  </code></pre>