VFX-JS

Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Type

EffectDims

vfx-js/src/types.ts:1105 ↗ 
import type { EffectDims } from "@vfx-js/core";

Per-stage layout snapshot. Same shape on EffectContext.dims (frame-fresh in update / render) and as the argument to Effect.outputRect.

Units:

  • Physical pixels: contentRect, srcRect, canvasRect, elementPixel, canvasPixel.
  • Logical (CSS) pixels: element, canvas. Multiply by pixelRatio to get the matching elementPixel / canvasPixel.

In a post-effect there is no element, so element / elementPixel mirror canvas / canvasPixel, and contentRect mirrors canvasRect.

Properties

canvas 

readonly canvas: readonly [number, number]

canvasPixel 

readonly canvasPixel: readonly [number, number]

canvasRect 

readonly canvasRect: ElementRect

Canvas rect in element-local px.

contentRect 

readonly contentRect: ElementRect

Element rect in element-local px: [0, 0, elementPixel[0], elementPixel[1]].

element 

readonly element: readonly [number, number]

elementPixel 

readonly elementPixel: readonly [number, number]

pixelRatio 

readonly pixelRatio: number

srcRect 

readonly srcRect: ElementRect

Src buffer's rect in element-local px (= prev stage's outputRect, or contentRect at stage 0).