Playground

Apply custom transformation matrices to shapes

Direct shape updates with retained properties

Demonstrate shape fill rules

Demonstrate gradient spread modes: pad, reflect, and repeat

Apply linear and radial gradients to strokes

Animate gradients with shape transformations

Apply linear and radial gradients to shapes

Rotate images around center origin

Scale images around center origin

Demonstrate opacity control on shapes and scenes

Draw shapes using path commands

Demonstrate radial gradients

Demonstrate scene blending modes

Animate scene transformations with rotate, scale, and translate

Draw simple shapes

Demonstrate stroke join and cap styles

Demonstrate stroke miter limit behavior

Demonstrate stroke width, join, and cap styles

Animate shapes with rotation and scaling

Trim paths to show only portions of shapes

Traverse a picture scene tree and modify paint properties by ID

Demonstrate all blend modes with various paint types

Display bounding boxes around objects

Demonstrate clipping for shapes and scenes

Duplicate shapes, scenes, pictures, and objects

Drop shadow effect applied to scene content

Global error handler catches

Demonstrate Alpha and InvAlpha masking with linear gradients

Interactive example demonstrating paint.intersects() API with mouse hover detection

Demonstrate Alpha, InvAlpha, Luma, and InvLuma masking with various paint types

Demonstrate all 6 mask composition methods (Add, Subtract, Intersect, Difference, Lighten, Darken)

Comprehensive demonstration of all scene effects: Gaussian Blur, Fill, Tint, and Tritone

Control canvas viewport for panning effects

Use a custom font provider to load fonts from any source

Demonstrate text animation with multiple effects

Demonstrate text layout with alignment within a bounding box

Demonstrate text wrapping modes with different alignments

Render text with OpenType fonts

Render text with TrueType fonts

Load and display JPG images

Load and play a Lottie animation with playback controls

Lottie animations with expressions support

Override Lottie properties at runtime with slots (color, gradient, transform, text)

Drag on the canvas to spin the Lottie in real time — driven by expression slots

Supply external Lottie assets (images, fonts) at runtime via a resolver callback

Load and display PNG images

Load and display raw ARGB8888 image data

Load and display the Ghostscript Tiger SVG

Load and display WebP images