CanvasGlobe
CanvasGlobe (canvas-globe) is an interactive JavaScript 3D globe and flat world
map drawn on a plain 2D canvas. No WebGL, no D3, no map tiles, no API keys, and no runtime network
calls: the country geometry ships inside the package.
Official packages provide native components for React, Vue 3, Angular, Svelte,
and Web Components. The 3d-globe-map package is an alternate discovery entry
to the same canonical renderer.
Everything on this site is a live instance, not a screenshot. Drag it.
Why this exists
Most globe libraries want three.js and a few hundred kilobytes of WebGL, or they want a Mapbox key
and a billing account. This one wants a <canvas>.
| CanvasGlobe | |
|---|---|
| Runtime dependencies | none |
| Network calls | none |
| API keys | none |
| Bundle | ~120 KB gzipped, geometry included |
| Renderer | 2D canvas: works anywhere <canvas> does |
| SSR | safe to import; nothing touches the DOM until you construct |
What it does
- Globe and flat map: orthographic sphere plus equirectangular, Mercator and Natural Earth
- Markers sized by weight, with emoji, logos, avatars, live pulse rings and clustering
- Great-circle arcs that bow over the surface and clip correctly at the horizon
- Choropleth by ISO code, numeric id or country name
- Ten presets: dot-matrix hologram, neon, blueprint, printed atlas and more
- Country canvas: an image, GIF or video clipped to a country's outline
- Viewer location from the browser's time zone, with no permission prompt
- Live pings, tours, scroll stories, WebM recording and social-size exports
- Accessible: keyboard control, a live region and
prefers-reduced-motion
Where to go next
| If you want to… | Read |
|---|---|
| Get something on screen | Your first globe |
| Use it without a build step | No build step |
| Add it to React, Vue, Angular, or Svelte | Official framework packages |
| Plot your data | Markers and Data in |
| Make it look right | Looks and presets |
| Build a share graphic | Exporting |
| Look up an option | API reference |
:::tip Everything is live Code blocks marked live are editable. Change a value and the globe next to it re-renders immediately. :::