valo
Reference

DisplayListBuilder

Record drawing commands without touching the GPU.

DisplayListBuilder records drawing commands into a display list. Recording is CPU-only: bounds, clips, and layer extents are resolved here so rendering does not rediscover them.

use valo::{Color, DisplayListBuilder, Paint, Rect};

let paint = Paint::from_color(Color::rgb(0.78, 1.0, 0.24));
let mut builder = DisplayListBuilder::new();
builder.save();
builder.translate(160.0, 110.0);
builder.rotate(0.2);
builder.draw_rrect(Rect::new(-100.0, -55.0, 200.0, 110.0), 20.0, &paint);
builder.restore();
let display_list = builder.build();
const builder = new DisplayListBuilder();
builder.save();
builder.translate(160, 110);
builder.rotate(0.2);
builder.drawRoundedRect(-100, -55, 200, 110, new Float32Array([20]), paint);
builder.restore();
const list = builder.build();

The scene is JavaScript. Change the rotation, corner radii, or circle radius and it redraws. This widget already owns the builder for the frame.

scene.jsplayground
loading editor
liveacquiring device

build() finishes the recording. In Rust it consumes the builder. In JavaScript every mutating method throws after build().

Transforms, clips, and layers

Save and restore around local transforms, clips, and layers. An unmatched restore is a debug assertion in Rust and is ignored in release.

  • Clips may intersect the current region or subtract from it (ClipOp.Difference).
  • Save layers group several draws before applying opacity, blending, or a filter.
  • Backdrop blur reads what was already drawn beneath its bounds.

Coordinates are local pixels with y downward until a transform says otherwise.

What you can record

Rects, rounded rects, circles, paths, images, nested display lists, and paragraphs. JavaScript drawCircle and clipRoundedRect match the C and Rust circle and rounded-clip calls. See Paint for style and Path for geometry.

Next: DisplayList.

On this page