Canvas Container

• Use a DOM element for container

• Multiple canvases share the same container

• Use user-defined <canvas>

• Multiple canvas

• Support applying CSS Transform on container

• OffscreenCanvas

Canvas

• Set background of Canvas

• Resize canvas

• Rendering on demand

• Coordinates

• Use picking API

Camera Projection Mode

• Orthographic camera

• Perspective camera

Camera Animation

• Landmark

• Landmark

Camera Action

• Camera actions

• View Offset

• Zoom by specified viewport point

• Min/max distance from camera's position to focal point

Circle

• Circle

• Circle with gradient & pattern

• Circle with filter

Ellipse

• Ellipse

Rect

• Rectangle

Image

• Image

• Keep aspect ratio

Line

• Line

• Marker

• Thin Line

Polyline

• Polyline

• Marker

Polygon

• Polygon

• Marker

• Fillrule

Path

• Style of path

• Path with L commands

• Path with A commands

• Multi segments in a path definition

• Compose multiple paths with a group

• Marker

• Get point from path

• Picking

Text

• Text

• Text Overflow

• Text Baseline

• Text Billboard

• Use Web Font Loader

• D3 Word Cloud

• Text Baseline

HTML

• HTML

• Override CSS properties on container

CustomElement

• Custom Element

• Arrow

Pattern

• Inheritance

• <color>

• <paint>

• <length>

• Use custom property

ClipPath

• Clip Path

• Animated ClipPath

Gradient

• Gradient

• Path with gradient

• Radial Gradient

• Inner Shadow

Pattern

• Pattern

• Rect as pattern

• Dots Pattern

• Lines Pattern

• Squares Pattern

• Pie Chart

Gesture

• Pinch zoom gestures with PointerEvents

• Gesture with Hammer.js

• Gesture with Hammer.js

Drag'n'Drop

• Drag'n'Drop with Interact.js

• Drag with PointerEvents

Picking

• Single circle picking

• Multiple circle picking

• Multiple shapes picking

Others

• Delegate

• Dispatch custom event

• Delegate with event's name

• SceneGraph Events

• Use MutationObserver

• TouchEvents

• pointerupoutside

• Listen to native click event

Basic Options

• Easing

• Lifecycle of animation

• Use delay

• Use currentTime

• Sequence of animations

• Animatable attributes

• Interpolate visibility

• Use onframe callback

Common Animation Effects

• Offset path

• Marching ants

• Line dash

• Ripple Effect

• Useful animations

• Multiple Animations Per Element

Morphing Animation

• Morph

• Convert DisplayObject to CubicBezier Path string

• Convert DisplayObject to CubicBezier Path string

SceneGraph

• Hierarchy

• CSS Box Model

• Transform

• Origin

• Visibility & Z-index

• Z-index

• Change zIndex on Group

• Clone Node

A11y

• Search text content in browser

• Use keyboard navigation

Canvaskit

• Use Skottie playing Lottie animations

• Use CanvasKit drawing particles

• Draw emoji

• Draw text along path

• Draw paragraph with CanvasKit

Drag'n'Drop

• Use Drag'n'Drop

• Use Drag'n'Drop on Group

• Drag'n'Drop Perf

Gesture

• Use Press Gesture

Physics Engine

• Use Box2D in 2D scene

• Use MatterJS in 2D scene

• Use PhysX in 3D scene

Rough

• Use rough.js

• rough.js options

• Use rough.js and D3 barchart

Yoga Layout Engine

• Use Yoga layout engine - container

• Use Yoga layout engine - child element

• Use Yoga layout engine - available space

• Use Yoga layout engine - text

• Use Yoga layout engine - use animation

Zdog

• Use Zdog

Annotation

• Use annotation

• Select image

Camera Control

• Use orbit control

CSS Select

• CSS Selector Plugin

Simple Algorithm

• Add 2 vectors

• Matrix multiplication

• Reduce Sum

• Compute Shader

WebGPU Graph

• WebGPU Graph PageRank

• WebGPU Graph SSSP

• WebGPU Graph BFS

Graph Analysis Algorithm

• Breadth First Search

• Louvain Clustering Algorithm

• Bellman-Ford SSSP

• Bellman-Ford SSSP(1k vertices & 5k edges)

• Pagerank

• Pagerank(1k vertices & 50w edges)

• Fruchterman Layout

Geometry

• Point

• Plane

• Cube

• Sphere

• Torus

• Cylinder

• Cone

• Capsule

• Use BufferGeometry

Material

• Basic

• Lambert

• Phong

• Use ShaderMaterial

More cases

• Force 3D

• Music Visualization

• Billboard effect

• Enable size attenuation

• WebGPU

D3

• D3's Piechart

• Takeover D3's rendering layer

• D3's Linechart

• D3's Scatterplot

• D3's ForceDirectedGraph

• D3 Geo

• D3's Annotation

Lottie

• Lottie Player - Basic shapes

• Lottie Player - Transform

• Lottie Player - Displaying assets

• Radar

• Ant

• Spring

• Arrow

• Icons

Observable Plot

• Dot Plot

• Rough + Dot Plot

Declarative Usage

• Use Web Components

• Use Web Components and React

• ReactG

• ReactG render to any element from G

Image Exporter

• Export canvas' contents to image

• Export SVG includes animation

Use lightweight version

• Use lightweight version of G

Performance of WebGL

• Zoom in Circle

• LineDashed Circle

• Instanced Text

• Instanced Rect

• Instanced Rounded Rect

• Instanced Lines

• Instanced Polygons

• Instanced Polylines

• Instanced Image

• Instanced Simple Path(one-command curve)

• Instanced Arrow

• Render Circle, Path and Text

• A large graph with 8k nodes

• A large graph with 8k nodes

• A large graph with 5.5w nodes

• Instanced Lines

Performance of Canvas

• Rendering-optimization with g-canvas

• Rendering large images optimization with g-canvas

• Render Circle & Path with g-canvas

• Rendering with dirty rectangle(Canvas)

• Compared with G 4.0

Performance of animation

• Circle

• Path

• Move groups

• Move nodes

• Update position of Text in WebGL

• Update opacity of shapes in WebGL

Performance tips

• Viewport culling

• Disable CSS parsing

Guide

• Guide chapter2: use renderer

• Guide chapter3: interaction