Exporting and recording

A PNG at any size

exportImage renders one frame off-screen at whatever size you ask for. The live canvas is never touched, so a 1080 × 1920 export from a 400 px widget works fine.

const url = globe.exportImage({ preset: "story" });          // data URL
const blob = await globe.exportBlob({ preset: "og" });       // Blob

Loading globe…

Size presets

Preset	Pixels	For
square	1080 × 1080	Instagram, LinkedIn
story	1080 × 1920	Stories, Reels, Shorts
portrait	1080 × 1350	Instagram portrait
wide	1920 × 1080	Slides, YouTube
linkedin	1200 × 627	LinkedIn link previews
og	1200 × 630	Open Graph cards
twitter	1600 × 900	X / Twitter cards
thumbnail	640 × 640	Small previews

Or give explicit dimensions:

globe.exportImage({ width: 2400, height: 1260 });

Transparent backgrounds

transparent: true skips the ocean fill and the atmosphere, leaving an alpha channel. Combine with focus.isolate for a clean country silhouette to drop into a slide.

globe.focusOn("India", { isolate: true });
globe.exportImage({ preset: "square", transparent: true });

There is also a plain snapshot of the live canvas at its current size:

globe.snapshot();          // → data URL
await globe.toBlob();      // → Blob

Recording a clip

record() encodes WebM from the canvas stream using MediaRecorder. The clip is produced entirely in the tab: nothing is uploaded and no encoder dependency is involved.

import { canRecord } from "canvas-globe";

if (canRecord()) {
  const { promise, stop } = globe.record({ duration: 6000, filename: "globe.webm" });
  const blob = await promise;
}

Option	Default	Meaning
duration	6000	Milliseconds. 0 records until you call stop()
fps	30	Capture rate
bitrate	6e6	Video bits per second
filename	Not set	If set, downloads automatically
type	auto	Container; falls back through VP9 → VP8 → WebM → MP4

Check support first: Safari's coverage is narrower than Chrome's:

import { canRecord, supportedRecordingType } from "canvas-globe";

canRecord();                 // boolean
supportedRecordingType();    // "video/webm;codecs=vp9" or null

Making a share graphic

The pieces compose into a complete workflow:

const globe = createGlobe(canvas, {
  scene: "signups",
  markers: fromCSV(csv),
  counter: { value: total, label: "customers worldwide" },
});

globe.fitToMarkers();

// A still for the post
globe.exportImage({ preset: "linkedin" });

// And a six-second loop for the video slot
await globe.record({ duration: 6000, filename: "growth.webm" }).promise;

Server-side rendering

exportImage needs a document, so it returns null in Node. For build-time OG images, run it in a headless browser such as Playwright or Puppeteer and read the data URL from the page. A native Node canvas backend is not currently supported.

Colour and fidelity

Exports render at the requested pixel size with a device pixel ratio of 1, so a 1080 × 1080 export really is 1080 × 1080. Text, markers and dot matrices are all sized relative to the canvas, so a large export is genuinely higher resolution rather than an upscale.