Layer

A Layer is a grouping node directly under the Stage. Use layers to organize your scene into stacked bands, for example a background layer, a content layer, and a UI/overlay layer. Layers draw in document order: later layers paint on top of earlier ones.

<Stage width={width} height={height}>
  <Layer>{/* background layer untouched by the eraser */}</Layer>
  <BrushLayer type="eraser">{/* A special layer in which anything can be erased  */}</Layer>
</Stage>

Stacked layers

Props

Layer accepts every shared node prop (x, y, scaleX, rotation, opacity, visible, listening, event handlers, …) plus:

Prop	Type	Default	Description
width	number	None	Optional hit-test width. When set with height, the layer becomes a tappable region covering 0,0 → width,height.
height	number	None	Optional hit-test height (see above).

Making Layers tappable

Because a bare layer has no geometry, it can't receive taps on its own. Give it a width and height and it becomes a full-area tap target, handy for "tap empty space to deselect":

<Layer width={width} height={height} onTap={() => setSelected(null)}>
  {/* shapes; a shape's own onTap should set cancelBubble = true */}
</Layer>

Tap empty to deselect

Shapes on top still receive their own taps first; the layer only gets the tap when nothing above it handles it (see Events).

Transforms and opacity

A layer is a transformable container: setting x, scaleX, rotation, or opacity on it affects everything inside. This makes layers a convenient unit for panning or fading a whole band of content at once.