@threlte/core
<Canvas>
The <Canvas> component is the root of your Threlte scene. It provides contexts
that all other components and many hooks depend on. This means they need to be
child components to the <Canvas> component.
Structuring Your App
Check out our guide on structuring your app for a fail-safe app architecture recipe.
Size
By default, the <canvas> (the DOM element inside <Canvas>) that is being
rendered into takes up 100% of the width and height of its parent element and
reacts to changes in the parent element’s size. This means that – simply put –
you define the size of the <canvas> element by layouting the parent element.
<div style="width: 300px; height: 300px;">
<!-- The canvas will take up 300px by 300px -->
<Canvas>
<Scene />
</Canvas>
</div>When taking the parent’s size into account, offsetWidth and
offsetHeight
are used.
DOM reference
The context provided by the <Canvas> component contains a dom element. It
refers to the DOM element that a particular view is rendered into. In the most
common case, this is the wrapper of the canvas element provided by Threlte.