title: React canvas in css grid not full size
body: <p>I am building a line plotter in react. This &quot;line plotter&quot; should be inside a css grid in an item.
  To plot the lines I am trying to use the <code>&lt;canvas&gt;</code> element. First of all is that smart or are there better ways?<br />
  But secondly and most importantly my canvas is not set to the full size inside the grid item. Is there any way of doing that and later also setting the origin of the canvas into the middle of the canvas?<br />
  My code so far:</p>
  <pre><code>const Canvas = props =&gt; {
  
      const { draw, settings, ...rest } = props
      const canvasRef = useRef(null)
  
      useEffect(() =&gt; {
  
          const canvas = canvasRef.current
          const context = canvas.getContext('2d')
          draw(context, settings)
      }, [draw])
  
      return (
          &lt;div className={&quot;fractal_tree_canvas&quot;}&gt;
              &lt;canvas ref={canvasRef}/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>and the css</p>
  <pre><code>.fractal_tree_canvas {
    height: 100%;
    width: 100%;
    grid-row: 2;
    grid-column: 2;
  
  }
  </code></pre>
  <p>And finally the gird:</p>
  <pre><code>.fractal_tree_screen {
    background-color: #e7e7e7;
    display: inline-grid;
    position: relative;
    width: 100vw;
    height: calc(100vh - 65px);
    grid-template-columns: 5% 50% auto 5%;
    grid-template-rows: 6% 1fr 6%;
  
  }
  </code></pre>
  <p>But somehow my canvas end up having the size 300x150 waht could I do to make it the full size of the item?</p>