Rect

A filled or stroked rectangle on the canvas.

Attributes

Attribute	Type	Default	Description
`x`	signed pt	—	X position (or offset from anchor)
`y`	signed pt	—	Y position (or offset from anchor)
`w`	pt	—	Required. Width
`h`	pt	—	Required. Height
`anchor`	string	—	Reference point — when set, x/y are offsets
`radius`	pt	—	Corner radius
`fill`	color	—	Fill color
`stroke`	color	—	Stroke color
`stroke-width`	pt	—	Stroke width
`stroke-dash`	string	—	Dash pattern: `"4 2"`
`opacity`	0–1	1	Opacity

Either anchor or both x and y must be provided.

Full-page tinted background (underlay)

<canvas>
  <layer page="each">
    <rect x="0pt" y="0pt" w="612pt" h="792pt" fill="#f0f4ff" opacity="0.4"/>
  </layer>
</canvas>

L.canvas(NoAttr, [
    L.layer({ page: 'each' }, [
        L.rect({ x: '0pt', y: '0pt', w: '612pt', h: '792pt', fill: '#f0f4ff', opacity: '0.4' }),
    ]),
])

L.canvas(NoAttr, [
    L.layer(LayerAttr(page='each'), [
        L.rect(RectAttr(x='0pt', y='0pt', w='612pt', h='792pt', fill='#f0f4ff', opacity='0.4'))
    ])
])

L::canvas(NoAttr, [
    L::layer(new LayerAttr(page: 'each'), [
        L::rect(new RectAttr(x: '0pt', y: '0pt', w: '612pt', h: '792pt', fill: '#f0f4ff', opacity: '0.4')),
    ]),
])

L.Canvas(NoAttr, [
    L.Layer(new() { Page = "each" }, [
        L.Rect(new() { X = "0pt", Y = "0pt", W = "612pt", H = "792pt", Fill = "#f0f4ff", Opacity = "0.4" }),
    ]),
])

Inset border (stroke only)

A rectangle with no fill is drawn as an outline.

<canvas>
  <layer page="each">
    <!-- inset border 20pt from each edge on letter size -->
    <rect x="20pt" y="20pt" w="572pt" h="752pt"
          stroke="#cccccc" stroke-width="1pt"/>
  </layer>
</canvas>

L.canvas(NoAttr, [
    L.layer({ page: 'each' }, [
        L.rect({ x: '20pt', y: '20pt', w: '572pt', h: '752pt', stroke: '#cccccc', strokeWidth: '1pt' }),
    ]),
])

L.canvas(NoAttr, [
    L.layer(LayerAttr(page='each'), [
        L.rect(RectAttr(x='20pt', y='20pt', w='572pt', h='752pt', stroke='#cccccc', stroke_width='1pt'))
    ])
])

L::canvas(NoAttr, [
    L::layer(new LayerAttr(page: 'each'), [
        L::rect(new RectAttr(x: '20pt', y: '20pt', w: '572pt', h: '752pt', stroke: '#cccccc', strokeWidth: '1pt')),
    ]),
])

L.Canvas(NoAttr, [
    L.Layer(new() { Page = "each" }, [
        L.Rect(new() { X = "20pt", Y = "20pt", W = "572pt", H = "752pt", Stroke = "#cccccc", StrokeWidth = "1pt" }),
    ]),
])

Rounded highlight box

<rect x="40pt" y="100pt" w="200pt" h="60pt"
      fill="#fff8e1" stroke="#f9a825" stroke-width="1pt" radius="4pt"/>

L.rect({ x: '40pt', y: '100pt', w: '200pt', h: '60pt', fill: '#fff8e1', stroke: '#f9a825', strokeWidth: '1pt', radius: '4pt' })

L.rect(RectAttr(x='40pt', y='100pt', w='200pt', h='60pt', fill='#fff8e1', stroke='#f9a825', stroke_width='1pt', radius='4pt'))

L::rect(new RectAttr(x: '40pt', y: '100pt', w: '200pt', h: '60pt', fill: '#fff8e1', stroke: '#f9a825', strokeWidth: '1pt', radius: '4pt'))

L.Rect(new() { X = "40pt", Y = "100pt", W = "200pt", H = "60pt", Fill = "#fff8e1", Stroke = "#f9a825", StrokeWidth = "1pt", Radius = "4pt" })