From primitives to animated interfaces
Each guide starts with a practical outcome and includes the code needed to reproduce it. Read them in order or jump directly to the feature you need.
A minimal immediate-mode frame
Keep drawing state local, bracket each frame, and express operations in visual order.
draw_frame.cpp
canvas.beginFrame();
canvas.save();
canvas.translate({24.0f, 24.0f});
canvas.fill({0.35f, 0.62f, 1.0f, 1.0f});
canvas.roundedRect({0.0f, 0.0f, 280.0f, 120.0f}, 20.0f);
canvas.restore();
canvas.endFrame();Compose reusable visual objects
Nodes retain geometry and style, while parent-child relationships provide transforms, ordering, and interaction boundaries.
Use stable ownership.Create long-lived scene nodes once, then update their properties during interaction instead of rebuilding the entire tree every frame.
Patterns that keep rendering smooth
- Cache fonts and images instead of loading them in the render loop.
- Group related Canvas operations to reduce state changes.
- Drive animation with frame delta time, not fixed increments.
- Keep OpenGL calls on the thread that owns the context.