@masatomakino/threejs-interactive-object
    Preparing search index...

    Function resizeCanvasStyle

    • Fits a canvas element within its parent container while preserving aspect ratio.

      Parameters

      • container: HTMLElement

        Reference HTML element that defines available space for the canvas

      • canvas: HTMLCanvasElement

        Three.js canvas element to fit within the container

      • canvasWidth: number

        Original canvas width for aspect ratio calculation

      • canvasHeight: number

        Original canvas height for aspect ratio calculation

      Returns void

      Automatically adjusts canvas CSS styling to fit within the specified container while maintaining original aspect ratio through letterboxing or pillarboxing. Canvas pixel dimensions and rendering performance remain unchanged.

      const container = document.getElementById('canvas-container') as HTMLElement;
      const canvas = document.getElementById('webgl-canvas') as HTMLCanvasElement;

      // Fit canvas within container maintaining 16:9 aspect ratio
      resizeCanvasStyle(container, canvas, 1920, 1080);

      // Handle window resize events
      window.addEventListener('resize', () => {
        resizeCanvasStyle(container, canvas, 1920, 1080);
      });

      // Use different containers for different layouts
      const sidebar = document.querySelector('.sidebar') as HTMLElement;
      resizeCanvasStyle(sidebar, canvas, 800, 600);

      Performance Considerations:

      • Changes only CSS display size, never canvas pixel dimensions
      • Canvas pixel count remains constant, rendering workload unchanged
      • For high-DPI displays or quality issues, adjust canvas resolution separately

      Layout Behavior:

      • Adapts to container dimensions using clientWidth and clientHeight
      • Uses CSS width and height properties for styling
      • Maintains aspect ratio through proportional scaling
      • Works with any HTML element as container

    Settings

    Member Visibility