Skip to main content

Canvas

ThreeCanvasManager centralizes renderer canvas setup in Envy.

What it handles​

  • canvas creation
  • renderer creation
  • forced aspect ratio
  • fixed size or container-based size
  • centering styles

Basic example​

import { ThreeCanvasManager, ThreeSceneManager } from "envy";
import { PerspectiveCamera } from "three";

const canvas = new ThreeCanvasManager({
  width: 1280,
  height: 720,
  aspectRatio: 16 / 9,
  center: true
});

const scenes = new ThreeSceneManager();
const game = scenes.createScene("game");
const camera = new PerspectiveCamera(75, 16 / 9, 0.1, 1000);

canvas.render(game.scene, camera);

Container-based sizing​

const canvas = new ThreeCanvasManager({
  container: document.getElementById("app") ?? undefined,
  aspectRatio: 16 / 9,
  center: true
});

canvas.fitToContainer();

Use ThreeCanvasManager when you want Envy to own the renderer setup instead of configuring it manually in app code.