Three-fiber canvas size

Question

I have a question regarding the three-fiber canvas size. I need a fixed canvas width and height. Unfortunately I have not found out how to change the canvas width and height. Even though I can change the sizes with style={{width: 100px, height: 100px}}, it is not the right thing. The canvas should be bigger than the div. does anyone have an idea how to do this with three-fiber?

<Canvas
    size={[`2000px`,`3000px`]}
    style={{width: `100%`, height: `auto`, position: `relative` }}
    ref={canvas}
    shadows
    camera={{position: [10, 0, 80], fov: 45}}
>
    <Suspense fallback={false}>
        <Content/>
    </Suspense>
</Canvas>

Answer 1

React Three Fiber's canvas will take the width and height of the parent container.

Instead of setting the width and height on the Canvas component, try setting the width and height on the parent instead, like this:

<div style={{ width: "50vw", height: "50vh" }}>
  <Canvas flat linear>
    <App />
  </Canvas>
</div>

View Demo

Answer 2

Canvas in three-fiber takes on the width of its parent container. just resize whatever div it is being contained by.