API reference

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

classFixedResolutionCanvasSizing

@codexo/exojs / core / stable

Scales the canvas to its parent while the render resolution stays exactly at the base resolution. The CSS box is the largest base-aspect rectangle that fits the parent, so the canvas grows on a large display and shrinks on a small one, but the backing store is always `base x pixelRatio` and the logical coordinate system is always the base resolution. Whatever space the parent has left over around that rectangle stays the page's - nothing is drawn into it. The mode for a deliberately constant internal resolution: retro and pixel-art rendering, a fixed GPU cost per frame, or any presentation where the canvas is an image that is merely scaled to the viewport. Requires a canvas element with a parent in the document.

props

methods

events

Import

import { FixedResolutionCanvasSizing } from '@codexo/exojs'

Scales the canvas to its parent while the render resolution stays exactly at the base resolution.

The CSS box is the largest base-aspect rectangle that fits the parent, so the canvas grows on a large display and shrinks on a small one, but the backing store is always `base x pixelRatio` and the logical coordinate system is always the base resolution. Whatever space the parent has left over around that rectangle stays the page's - nothing is drawn into it.

The mode for a deliberately constant internal resolution: retro and pixel-art rendering, a fixed GPU cost per frame, or any presentation where the canvas is an image that is merely scaled to the viewport.

Requires a canvas element with a parent in the document.

Constructors1

new(): FixedResolutionCanvasSizing

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/FixedResolutionCanvasSizing.ts