Make canvas to fit to container

Question

I have the following react component:

render() {
    return (
      <div className="App">
        <header className="App-header">
          <AppBar position="static">
            <ToolBar>
              <Grid container>
                <Grid conatiner justify="center" item lg={10}>
                  <p>The Game Of Life</p>
                </Grid>
                <Grid container direction="row" justify="flex-end" alignItems="center" item lg={2}>
                  <this.BarButton label="Clear" callBack={() => this.catchAction('clear')} />
                  <this.BarButton label="Go!" callBack={() => this.catchAction('go')}/>
                </Grid>
              </Grid>
            </ToolBar>
          </AppBar>
          <Grid container directiorn="row" justify="center" alignItems="center" item lg={10}>
            <canvas id="canvas" width="100vw" heigth="100vh" style={{border: '1px solid #000000'}}></canvas>
          </Grid>
        </header>
      </div>
    )
  }

I want the canvas to fit the whole screen left after the AppBar, so I tried applying answers to this question, but none of them worked, and the canvas only covers a small part of the remaining screen:

I haven't found another solution to my issue.

score 0 · Answer 1 · answered Jan 02 '21 at 17:45

I was able to make your canvas expand using the styled-components library.

import React from "react";
import { AppBar, Button, Toolbar, Typography } from "@material-ui/core";
import styled from "styled-components";

const CanvasView = () => {
  return (
    <div>
      <AppBar position="static">
        <StyledToolbar>
          <Typography variant="h6">Game of Life</Typography>
          <ButtonContainer>
            <Button variant="contained">Clear</Button>
            <Button variant="contained">Go!</Button>
          </ButtonContainer>
        </StyledToolbar>
      </AppBar>
      <CanvasContainer>
        <StyledCanvas />
      </CanvasContainer>
    </div>
  );
};

const StyledToolbar = styled(Toolbar)`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const ButtonContainer = styled.div`
  & > button {
    margin-left: 16px;
  }
`;

const CanvasContainer = styled.div`
  width: 100vw;
  height: calc(100vh - 64px);
  overflow: hidden;
`;

const StyledCanvas = styled.canvas`
  width: 100%;
  height: 100%;
  background-color: green;
`;

export default CanvasView;

Working CodeSandbox: https://codesandbox.io/s/stack-65541771-fullcanvas-wc7r4?file=/src/CanvasView.js:0-1037

score 0 · Answer 2 · answered Jan 02 '21 at 18:00

I was mistakenly trying to apply this answer as such, but it is intended for a html component, while I am actually using react components, so the settings must be applied as style props:

<canvas id="canvas" style={{border: '1px solid #000000', minHeight: '100vh', minWidth: '100vh'}} />

Everything worked fine after this change.

Make canvas to fit to container

2 Answers2