Recording export-quality globe animation

CanvasGlobe can turn the same canvas used in a product interface into a downloadable video clip. This page is a working recording lab, not a prerecorded mockup. The globe below is live, and the recording button asks your browser to encode exactly three seconds of it.

Loading the recording lab...

The clip stays in your tab. CanvasGlobe does not upload frames, contact an encoding service, or add an encoder dependency. The displayed file size, format, resolution, and elapsed time come from the recording your browser just produced.

Reproduce the sample

The live lab uses these settings:

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

const globe = createGlobe(canvas, {
  preset: "hologram",
  autoRotate: true,
  rotateSpeed: 0.035,
  fps: 30,
  markers,
  arcs,
});

console.log(supportedRecordingType());

const started = performance.now();
const blob = await globe.record({
  duration: 3000,
  fps: 30,
  bitrate: 6_000_000,
}).promise;

console.table({
  elapsedMs: performance.now() - started,
  bytes: blob.size,
  type: blob.type,
  width: canvas.width,
  height: canvas.height,
});

Run the recording three times after one warm-up. Keep the canvas size, duration, frame rate, browser window, and globe options unchanged. File size can vary slightly because the browser controls the encoder.

Observed desktop baseline

This is a small reproducibility check, not a claim that every machine will produce the same file. It records what happened in the live lab on 19 September 2026.

Environment	Value
Browser	Chrome 153.0.8010.52
Operating system	64-bit Windows, build 10.0.26200
Canvas backing size	808 x 453 pixels
Selected format	video/webm;codecs=vp9
Requested settings	3 seconds, 30 fps, 6 Mbps
Warm-up output	114 KB in 3.04 seconds
Three retained outputs	130 KB, 58 KB, 112 KB
Retained median	112 KB in 3.01 seconds

All three retained runs finished in 3.01 seconds. The file-size range was much wider than the timing range even though the requested settings were unchanged. That is useful evidence of a real limitation: videoBitsPerSecond is an encoder request, and the browser can produce materially different output sizes. If delivery size is contractual, transcode the result in a controlled video pipeline.

What the settings mean

Setting	Sample value	Practical effect
Duration	3 seconds	Short enough to verify quickly, long enough to show a complete route cycle
Frame rate	30 fps	A good default for product demos and social posts
Bitrate	6 Mbps	A quality request to the browser, not a guaranteed output rate
Resolution	Current canvas pixels	The browser records the backing canvas, including device pixel ratio
Container and codec	Browser-selected	CanvasGlobe tries supported VP9, VP8, WebM, and MP4 options in order

Browser behavior and limitations

• Chromium browsers normally select WebM with VP9 or VP8. Safari support is narrower and depends on the installed version.
• MediaRecorder decides the final codec, keyframes, and exact bitrate. CanvasGlobe passes a preference, not a promise.
• A three-second request normally completes a little after three seconds because the browser still has to flush the final encoded chunk.
• The recording captures only the canvas. HTML tooltips, controls, and surrounding page text are not part of the clip.
• Cross-origin images or videos need permissive CORS headers. A tainted canvas cannot be exported safely.
• The page must remain active for dependable real-time capture. Background-tab throttling can reduce smoothness.
• Reduced-motion preferences stop animated arcs and auto-rotation. Test the intended capture environment before recording a final asset.
• Audio is not included because the canvas stream contains video frames only.

Deterministic frame export versus real-time recording

Use record() when you want the animation as it appears in real time. Use renderFrame(ms) when every frame must be repeatable, such as a frame sequence assembled by a video pipeline.

for (let frame = 0; frame < 90; frame += 1) {
  globe.renderFrame(frame * (1000 / 30));
  const png = globe.exportImage({ width: 1920, height: 1080 });
  // Save the PNG in your own browser or automation pipeline.
}

globe.play();

Seeking fixes the effect clock, auto-rotation, moving arc heads, orbit motion, and marker pulses. Live video, newly fired pings, and a day-night terminator tied to the current time remain external state, so freeze or remove them when frame-exact output matters.

Choosing an export path

Need	Recommended path
Quick product demo or social clip	record() in Chrome or Edge
High-resolution still	exportImage() or exportBlob()
Transparent graphic	exportImage({ transparent: true })
Exact frame sequence	renderFrame(ms) plus PNG export
Build-time image	Run the page in Playwright or Puppeteer
Audio, editing, captions, or MP4 delivery	Record frames, then finish in a video editor or encoding pipeline

Continue with the general exporting guide for size presets and transparent PNGs, or use the launch announcement example for country-clipped media.

Before deploying CanvasGlobe in a public production project, purchase a license and add the provided license key.