<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.

App.svelte

<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.