registerSurface()

registerSurface() creates a CanvasSurface facade for an app-owned DOM element.

const surface = runtime.registerSurface(element, {
  bounds: { x: 0, y: 0, width: 320, height: 180 }
});

The app still owns the element's content, component tree, and application CSS transforms. Prism owns registration, paint integration and the layout width and height set by surface bounds.

Surface bounds are CSS pixels. Direct canvas drawing inside paint handlers uses backing-store pixels.

runtime.onPaint(({ drawSurface }) => {
  drawSurface(surface);
});

CanvasSurface instances belong to the runtime that created them.

Registering an element already owned by an active surface throws, within one runtime or across runtimes. Use surface.setBounds() to move or resize an existing surface. Dispose or unregister it before registering its element elsewhere.

A surface from one runtime cannot be used by another active runtime. Wrong-runtime operations throw.