@polygonschmied/stellar-canvas

A thin 2D-canvas wrapper for Stellar DS — DPI handling, resize observer, and an animation-loop helper.

Plumbing only — no drawing engine, no scene graph. The consumer keeps full control of the 2D context.

Install

pnpm add @polygonschmied/stellar-canvas @polygonschmied/stellar-tokens

Peer dependencies: react >= 18, react-dom >= 18.

Use

import "@polygonschmied/stellar-tokens/styles.css";
import { StellarCanvas, type CanvasFrameInfo } from "@polygonschmied/stellar-canvas";

function draw(ctx: CanvasRenderingContext2D, info: CanvasFrameInfo) {
  ctx.clearRect(0, 0, info.width, info.height);
  ctx.fillStyle = "var(--stellar-clay-fg)";
  ctx.fillRect(20, 20, 80, 80);
}

export function Scene() {
  return <StellarCanvas onFrame={draw} />;
}

Standalone animation loop (no canvas):

import { useAnimationLoop } from "@polygonschmied/stellar-canvas";

useAnimationLoop(({ elapsed }) => {
  // 60fps tick driven by requestAnimationFrame
});

License

MIT — see the repo README for the wider picture.