xiaoiver/infinite-canvas-tutorial resource

Health v2 · maintenance only

Flags: prerelease_only

Adoption not part of the score

1069 stars · 65 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-30, confidence not recorded

A step-by-step tutorial for building an infinite canvas application using WebGL/WebGPU rendering, SDF-based 2D graphics, and an ECS architecture in TypeScript. It includes an accompanying online app and covers rendering techniques used by tools like Figma and tldraw.

Use cases

• learn how to build an infinite canvas app
• learn WebGL and WebGPU 2D rendering
• implement SDF-based shape rendering
• build a GPU-accelerated 2D rendering engine
• learn ECS architecture in the browser
• implement text and bezier curve rendering on GPU
• build a whiteboard or design tool from scratch

When to choose

• you want to learn low-level GPU rendering for 2D graphics
• you're building a canvas-based editor like Figma, tldraw, or excalidraw
• you want a structured course with runnable examples
• you want to learn ECS and render graph techniques

When to avoid

• you need a production-ready canvas library out of the box
• you prefer Canvas2D/SVG-based simpler approaches
• you're not interested in rendering internals

Facets

learning-resource · maturity active

graphics data-visualization developer-tools graphics web-development frontend tutorials browser infinite-canvas webgl webgpu ecs sdf-rendering rendering-engine 2d-graphics gpu-accelerated web-server typescript gpu

Member repositories

For agents

markdown · JSON · MCP: product_card(name="xiaoiver/infinite-canvas-tutorial")