Sky Canvas

WebGPU Instanced Rendering Engine + AI Agent Canvas Editing Protocol

中文 | English

---

Highlights

• WebGPU Instanced Rendering — 500K rectangles at stable 60fps; circles, lines, SDF text
• Snapshot-Ops Protocol — AI agents edit the canvas via "read snapshot → reference #id → send ops"
• Multi-backend Fallback — WebGPU → WebGL → Canvas2D, zero-config
• Viewport Culling + Batching — QuadTree spatial index, only visible objects get rendered

Install

pnpm add @sky-canvas/renderer    # rendering engine
pnpm add @sky-canvas/sdk         # canvas SDK (includes renderer)

Agent Skill

Give AI agents the ability to draw on canvas (Claude Code / OpenCode / Codex):

npx skills add echoVic/sky-canvas --skill sky-draw

Quick Start

WebGPU Rendering

import { WebGPURenderer, buildGlyphAtlas } from '@sky-canvas/renderer/adapters/webgpu'

const canvas = document.querySelector('canvas')!
const renderer = new WebGPURenderer(canvas)
await renderer.initialize()

const atlas = await buildGlyphAtlas(renderer, 'monospace', 32)

renderer.render({
  rectangles: [
    { x: 50, y: 50, w: 200, h: 120, color: [0.26, 0.52, 0.96, 1] }
  ],
  circles: [
    { cx: 400, cy: 200, radius: 60, color: [0.96, 0.26, 0.21, 1] }
  ],
  texts: [
    { text: 'Hello Sky Canvas', x: 50, y: 300, atlas }
  ]
})

Scene SDK (for Agents)

Agents manipulate the canvas through declarative ops — no rendering knowledge needed:

import { SceneDocument, SceneRenderer, applyOps, snapshotText } from '@sky-canvas/renderer/scene'

const doc = new SceneDocument()

// 1. Describe changes with ops
applyOps(doc, [
  { op: 'add', id: 'title', type: 'text', x: 100, y: 50, text: 'Architecture', fontSize: 24 },
  { op: 'add', id: 'box1', type: 'rect', x: 80, y: 100, w: 200, h: 80, fill: '#4285f4' },
  { op: 'add', id: 'box2', type: 'rect', x: 400, y: 100, w: 200, h: 80, fill: '#34a853' },
  { op: 'connect', from: 'box1', to: 'box2' },
])

// 2. Read snapshot to verify
console.log(snapshotText(doc))
// @1 #title text (100,50) "Architecture"
// @2 #box1 rect (80,100,200,80) #4285f4
// @3 #box2 rect (400,100,200,80) #34a853
// @4 edge box1→box2

// 3. Render to canvas
const sceneRenderer = new SceneRenderer(renderer)
sceneRenderer.render(doc.scene)

Packages

Package	Description	Version
@sky-canvas/renderer	Rendering engine (WebGPU/WebGL/Canvas2D)
@sky-canvas/sdk	Canvas SDK (interaction, tools, history)

Development

git clone https://github.com/echoVic/sky-canvas.git && cd sky-canvas
pnpm install
pnpm dev:full          # build packages + start dev server
pnpm test              # run all tests
pnpm build:packages    # build all packages

Requires Node >= 22, pnpm >= 10.

Docs

• Architecture Overview
• Render Pipeline
• Canvas SDK Architecture
• Contributing

License

MIT