Canvas

Canvas calls a painter with PaintContext& and the component’s measured Size. Its local drawing rectangle is {0, 0, size.width, size.height}.

Canvas([](PaintContext& paint, Size size) {
  const Point center{size.width * 0.5F, size.height * 0.5F};
  paint.DrawCircle(center, 48.0F, Color::Rgb(92, 72, 180));
  paint.DrawCircle(center, 24.0F, Color::White());
}).With(Frame{.width = 160.0F, .height = 160.0F})

Painting

PaintContext records immutable platform-neutral commands for rectangles, gradients, text, images, external textures, circles, arcs, borders, shadows, paths, clipping, and transforms. Platform renderers replay the resulting PaintSequence.

Balance every pushed clip or transform on all painter paths. Prefer local coordinates derived from the supplied Size; parent placement is applied later by the render scene.

Updating a canvas

Read State during composition and capture the resulting declarative values in the painter. When those subscribed values change, recomposition supplies a new painter and invalidates the canvas paint result. For continuous visual motion, apply retained animation modifiers such as Rotation(AnimateTo(...)) rather than updating state every display frame.

Accessibility and input

Canvas has no inferred semantic meaning. Add Semantics for charts, controls, or other meaningful drawings, and bind pointer events only when the custom content is interactive.

Canvas(DrawChart)
    .With(Semantics{
        .role = SemanticRole::Image,
        .label = "Revenue by quarter",
    })

API

• Constructor: Canvas(CanvasPainter) where CanvasPainter is std::function<void(PaintContext&, Size)>.
• Common modifiers: Frame, Grow, ClipChildren, transforms, Semantics.

Read Canvas, paint, path, and vector for the full drawing surface.

Keep drawing deterministic

The painter may be recorded again after size or declaration changes, or its recorded commands may be replayed without running it. Do not launch tasks, write State, increment a simulation clock, or acquire platform objects inside the callback. Capturing only a State handle and reading it later in paint is not a substitute for a composition-time subscription.

#include <huxerui/huxerui.h>

using namespace huxerui;

[[huxerui::composable]]
View Meter(State<float> progress) {
  const float value = progress;
  return Canvas([value](PaintContext& paint, Size size) {
    paint.DrawRect({0.0F, 0.0F, size.width, size.height}, Color::Rgb(225, 228, 235));
    paint.DrawRect({0.0F, 0.0F, size.width * value, size.height}, Color::Rgb(92, 72, 180));
  }).With(Frame{.width = 200.0F, .height = 12.0F});
}

This small example assumes progress in [0, 1]; production code should validate or clamp its domain input. Prefer ProgressBar for an actual progress control with built-in semantics and theme behavior. A Canvas has no content-derived intrinsic image size: give it meaningful constraints, and draw relative to the Size supplied at recording time.