Infinite Canvas

What is an Infinite Canvas? The term "infinite" in infinitecanvas is described as follows:

• High scalability. Users can freely organize content structures in a non-linear fashion.
• Zooming. Emulates the "zoom in" to get an overview and "zoom out" to observe details as in the real world.
• Direct manipulation. Provides intuitive editing capabilities for basic shapes, including moving, grouping, and modifying styles.

The infinitecanvas showcases numerous examples ranging from design tools to creative boards, including some well-known products such as: Figma, Modyfi, Motiff, rnote, tldraw, excalidraw and so on.

As a front-end developer, I am very interested in the rendering technologies involved. Although tldraw, excalidraw, and others generally use more user-friendly technologies like Canvas2D/SVG, there are also many editors and design tools in the JS and Rust ecosystems that use more low-level rendering technologies for 2D graphics with GPU acceleration to achieve better performance and experience:

• Figma uses a tile-based rendering engine written in C++, compiled into WASM and then calls WebGL for rendering.
• Motiff also uses a tile-based rendering engine with WebGL.
• Modyfi uses wgpu from the Rust ecosystem, also compiled into WASM and then calls WebGL2 for rendering.
• Zed uses GPUI to render rectangles, shadows, text, images, and other UI elements.
• Vello and xilem experimentally use Compute Shader for 2D rendering.

Therefore, in this tutorial, I hope to implement the following features:

Use @antv/g-device-api as a hardware abstraction layer, supporting WebGL1/2 and WebGPU.

• Referencing mapbox and Figma, attempt to use tile-based rendering.
• Use SDF (Signed Distance Field) rendering for circles, ellipses, rectangles, etc.
• GPU-accelerated text and Bezier curve rendering.
• Use rough.js to support hand-drawn styles.
• Use CRDT (Conflict-free Replicated Data Type) to support collaborative Yjs.

Here are the lessons I've written or am writing at the moment:

• Lesson 1 - Initialize canvas
• Lesson 2 - Draw a circle
• Lesson 3 - Scene graph and transform
• Lesson 4 - Camera
• Lesson 5 - Grid
• Lesson 6 - Event system
• Lesson 7 - Web UI
• Lesson 8 - Optimize performance
• Lesson 9 - Draw ellipse and rectangle
• Lesson 10 - Import and export images
• Lesson 11 - Test and server-side rendering
• Lesson 12 - Draw polyline
• Lesson 13 - Draw path and hand-drawn shapes
• Lesson 14 - Canvas mode and auxiliary UI
• Lesson 15 - Draw text
• Lesson 16 - Advanced text features
• Lesson 17 - Gradient and Pattern
• Lesson 18 - Refactor with ECS
• Lesson 19 - History and Collaboration