shape()

Draws a p5.ShapeCollection onto the canvas.

You can draw/replay a previously recorded shape object onto the screen canvas using the shape() function. This enables a retained graphics pipeline similar to Processing PShape.

When rendering an imported SVG or recorded shape with shape(), you can also pass position coordinates (x, y) and an options configuration object to control alignment and scaling directly without manually wrapping calls in push(), translate(), scale(), and pop().

Options include:

• align: Alignment mode for positioning:

  • CORNER (default): Aligns the top-left corner of the shape's coordinate bounds to (x, y). Normalizes any non-zero viewBox offsets.
  • CENTER: Centers the shape's bounding box precisely at (x, y).
  • VIEWBOX: Preserves raw SVG coordinates without bounding box offset normalization, translating the origin (0, 0) directly to (x, y).

• scale: Scaling factor to apply:

  • Uniform scaling: A single number (e.g. { scale: 0.5 } or { scale: 2 }).
  • Non-uniform scaling: An object with independent axes (e.g. { scale: { x: 1.5, y: 0.8 } }).

When x, y, scale, or non-zero alignment offsets are applied, shape() automatically wraps transformations inside push() and pop(). Subsequent drawing operations on the canvas remain completely unaffected.