# xiaoiver/infinite-canvas-tutorial

A tutorial on infinite canvas

Repository: https://github.com/xiaoiver/infinite-canvas-tutorial
Canonical: https://ross.abutalabs.com/products/infinite-canvas-tutorial
Homepage: https://infinitecanvas.cc
Language: TypeScript
License: MIT
License Family: permissive
Topics: infinite-canvas, webgl, webgpu, rendering-2d-graphics, rendering-engine, visualization, frontend, tutorial, ecs, chatcanvas
Last push: 2026-08-19T10:06:03+00:00

## Health v2 (maintenance only)
Score: 71/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 98, release rhythm 40, longevity 63
- inputs: {"age_days": 895, "days_push": 14, "days_rel": 500, "gap_med": 11.5, "n_releases_24m": 3}
- flags: prerelease_only
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1069, forks 65 (observed 2026-08-28T04:03:27.743891+00:00)

## What it is
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
- artifact type: learning-resource
- maturity: active
- function: graphics, data-visualization, developer-tools
- domain: graphics, web-development, frontend, tutorials
- platform: browser
- tags: infinite-canvas, webgl, webgpu, ecs, sdf-rendering, rendering-engine, 2d-graphics, gpu-accelerated, web-server, typescript, gpu

## Member repositories
- xiaoiver/infinite-canvas-tutorial (main) score 71

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:03:27.743891+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T06:54:36.530338+00:00, confidence not recorded.
  - readme: https://github.com/xiaoiver/infinite-canvas-tutorial (fetched 2026-08-28T04:03:27.743891+00:00, sha f598f70baf01)
  - homepage: https://infinitecanvas.cc (fetched 2026-08-29T12:56:43.284859+00:00, sha 5f5edf29e6aa)
  - site_page: https://infinitecanvas.cc/guide/lesson-016 (fetched 2026-08-29T12:56:43.293943+00:00, sha 8daf8e49d2d9)
- Data as of 2026-08-30T08:39:29.467469+00:00.