Viewport

A root zoom/pan applied above the whole scene.

zoom scales about the scene origin and x/y translate in canvas points after it, the order a scroll view uses. To pinch about a focal point (fx, fy) - the gesture centroid, in canvas points - hold the scene point under it still:

const sceneX = (fx - x) / zoom
const sceneY = (fy - y) / zoom
canvas.current.setViewport({
  zoom: nextZoom,
  x: fx - nextZoom * sceneX,
  y: fy - nextZoom * sceneY,
})

Fields are plain numbers - the viewport is a native write above the draw program, never a value slot. To drive it from a gesture without touching the JS thread, pass the whole object as one SharedValue<Viewport> to <Canvas viewport> and write it from the gesture worklet; the update is atomic, so a pinch never presents a zoom with last frame's pan. CanvasHandle.setViewport is the same write from the JS thread.

Properties

x?

optional x?: number;

Canvas-point pan, applied after the zoom. Defaults to 0.

y?

optional y?: number;

Canvas-point pan, applied after the zoom. Defaults to 0.

zoom?

optional zoom?: number;

Scale about the scene origin. Defaults to 1; a non-positive value is ignored.