canvas

canvas(...) is the practical custom-drawing helper for Fission.

It lets you describe a small visual surface by emitting node ids inside a lowering closure. This is useful when the built-in widget set is close to what you need, but you want a focused custom drawing without creating a full custom render object.

Use canvas(...) for lightweight visual work such as charts, badges, custom indicators, or decorative graphics. Do not start with it for ordinary application layout, text, or buttons. Those cases are usually clearer and more testable with normal widgets.

Example

use fission::core::op::{Color as IrColor, Fill, PaintOp};
use fission::core::{NodeBuilder, Op};
use fission::prelude::*;

let node = canvas(Some(120.0), Some(24.0), |cx| {
    let bar = NodeBuilder::new(
        cx.next_node_id(),
        Op::Paint(PaintOp::DrawRect {
            fill: Some(Fill::Solid(IrColor {
                r: 46,
                g: 204,
                b: 113,
                a: 255,
            })),
            stroke: None,
            corner_radius: 6.0,
            shadow: None,
        }),
    )
    .build(cx);

    vec![bar]
});

This gives you a compact custom surface while still staying inside the Fission node model.

Field table

Field	Type	Meaning	Notes / default behavior
width	Option<f32>	Fixed width of the canvas box.	None leaves width to the parent constraints.
height	Option<f32>	Fixed height of the canvas box.	None leaves height to the parent constraints.
painter	Fn(&mut LoweringContext) -> Vec<NodeId>	Closure that emits the child node ids to group inside the canvas box.	Required. The closure should stay deterministic and purely descriptive.

Behavior and advice

canvas(...) is still a build-time description tool. The closure runs during lowering and should not do outside work. Think of it as a lower-level way to emit paint and layout nodes, not as a back door for imperative drawing state.

The helper also does not automatically add semantics. If the visual surface conveys important meaning, wrap it in surrounding widgets that provide labels or interaction. If the surface needs custom input or hit-testing logic, move up to CustomNode.

If you are teaching or onboarding a team, treat canvas(...) as an intermediate escape hatch: more advanced than Container or Composite, but simpler than designing a full custom node stack.

Related

CanvasLowerer, CustomNode, Composite, and Container.