API reference

Every public class, method, and event in @codexo/exojs. Generated from source.

classResponsiveCanvasSizing

@codexo/exojs / core / stable

Gives the canvas the whole parent element and derives the logical view from the shape it ends up with. The CSS box is the parent's size, and the backing store is that size times the pixel ratio, so the render resolution follows the display in both directions. The canvas therefore takes the parent's aspect ratio, and the logical coordinate system adapts to it rather than the canvas being letter- boxed inside it: nothing is stretched, nothing is cropped, and the axis the host has spare simply shows more world. With the default ResponsiveCanvasSizingOptions.minAspect the complete base view is always visible - a wider host sees more world left and right, a narrower one more above and below. Lowering `minAspect` allows the horizontal view to be reduced towards that ratio first, so a phone in portrait can be given a squarer view instead of a very tall one. Requires a canvas element with a parent in the document.

props

methods

events

Import

import { ResponsiveCanvasSizing } from '@codexo/exojs'

Gives the canvas the whole parent element and derives the logical view from the shape it ends up with.

The CSS box is the parent's size, and the backing store is that size times the pixel ratio, so the render resolution follows the display in both directions. The canvas therefore takes the parent's aspect ratio, and the logical coordinate system adapts to it rather than the canvas being letter- boxed inside it: nothing is stretched, nothing is cropped, and the axis the host has spare simply shows more world.

With the default ResponsiveCanvasSizingOptions.minAspect the complete base view is always visible - a wider host sees more world left and right, a narrower one more above and below. Lowering `minAspect` allows the horizontal view to be reduced towards that ratio first, so a phone in portrait can be given a squarer view instead of a very tall one.

Requires a canvas element with a parent in the document.

Constructors1

new(options: ResponsiveCanvasSizingOptions): ResponsiveCanvasSizing

Methods2

attach(context: CanvasSizingContextWhat a CanvasSizing is given to work with, and the one channel through which it changes the canvas. A context describes the application as it stood when the po…): void

Take ownership of context. Called once the surface exists and, for a canvas mounted through canvas.mount, once it is in the document.

detach(): void

Release everything CanvasSizing.attach created - observers, listeners, message channels - and undo any styling the policy applied itself. The CSS box committed through CanvasSizingContext.apply is not one of those: the application clears that on detach. The default implementation does nothing, which is correct for a policy that observes nothing.

Source

src/core/sizing/ResponsiveCanvasSizing.ts