Workers, main thread, and rendering

Sixtyfold has one TypeScript rendering design with three hosts: an OffscreenCanvas worker, an asynchronous main-thread adapter, and the server-side rendering entry point. Canvas2D is the only graphics backend.

Renderer selection is part of LineChartOptions and StockChartOptions. The resolved mode is available from chart.getRenderMode().

Automatic selection

renderMode: "auto" prefers a worker when the browser supports Worker, OffscreenCanvas, and canvas transfer. It falls back to the main thread when those capabilities are missing or worker construction is synchronously blocked, including by a restrictive Content Security Policy.

const chart = new LineChart(canvas, { renderMode: "auto" });
await chart.initialize();

console.log(chart.getRenderMode()); // "worker" or "main"

renderMode: "worker" expresses a preference, not a promise; it still falls back when worker rendering cannot start. Use getRenderMode() for telemetry and support information.

Worker mode

Worker mode transfers control of the canvas and bulk typed-array buffers. It is the preferred path for interactive multi-million-point charts because hierarchy construction, culling, layout, and drawing do not occupy the browser’s UI task.

Main-thread callbacks such as custom tooltip rendering receive compact renderer messages rather than direct access to worker state. Keep callbacks deterministic and quick.

Main-thread mode

Use renderMode: "main" for test environments, browsers without transferable canvases, strict hosts that prohibit workers, or smaller static charts where simpler integration is more important than UI-thread isolation.

The main-thread adapter intentionally delivers renderer messages asynchronously. Do not assume that calling setData has synchronously completed its first frame; use statistics or application-level readiness UI when frame completion matters.

Release checks exercise Line and Stock through both the main-thread path and the production-default auto path in Chromium, Firefox, and WebKit. On capable engines, auto resolves to an OffscreenCanvas worker. The forced-worker contract also runs in Chromium. This verifies compatibility, not a device-independent frame-rate guarantee.

Sizing and DPR

Set the canvas’s CSS width and height through layout. Sixtyfold observes element size and device-pixel-ratio changes, then updates the backing store and renderer layout. resize() remains available when a host changes layout in a way that cannot be observed immediately.

Avoid setting only the canvas width and height attributes for responsive charts. Those attributes are backing-store values, while Sixtyfold’s public sizes and styling fields use CSS pixels.

Content Security Policy

A restrictive production policy commonly needs:

default-src 'self';
script-src 'self';
worker-src 'self';
img-src 'self' data: blob:;
connect-src 'self';

Adapt this example to the application rather than copying it blindly. Remote overlay images require their origin in img-src and compatible CORS response headers.

Visibility and cleanup

The browser chart pauses or avoids unnecessary work when it is not visible. The optional Safari keep-alive interval is disabled by default and should only be enabled after reproducing resource reclamation on target Safari versions.

Always call destroy() before permanently discarding the canvas. In single-page applications, framework cleanup hooks are the correct place.