Core guide

Shape drawing

Draw rectangles, circles, lines, and outlines as frame-local commands.

Live example

See Shape drawing in action

See rectangles, circles, and lines drawn as frame-local value commands.

live rendering loading ticks 0

How it works

Shapes are frame-local commands, so you can submit them without allocating per-call GPU resources. Signed rectangles are normalized; invalid geometry throws, and valid zero-area shapes draw nothing.

Public types

RectangleDraw
CircleDraw
LineDraw
RectangleOutlineDraw
CircleOutlineDraw
Color

Minimum viable example

renderer.draw_commands([
  { kind: "rectangle", draw: { rectangle: { x: 20, y: 20, width: 80, height: 40 }, color: rgba(0.2, 0.5, 1, 1) } },
  { kind: "circle", draw: { circle: { x: 140, y: 40, radius: 20 }, color: rgba(1, 0.3, 0.3, 1) } },
]);

Scope and limitations

Rounded caps/joins, dashed strokes, and inside/outside alignment are deferred.