Pure builder functions returning typed canvas shape structs.

Every function returns a struct from Plushie.Canvas.Shape.*. The Plushie.Encode protocol implementations on each struct handle wire-format conversion. These are plain functions, not macros -- they can be called anywhere.

Structure macros (group, layer) live in Plushie.UI and are available inside canvas do-blocks. Inside those blocks, text, image, and svg calls resolve automatically to their canvas shape variants. For helper functions outside canvas blocks, import this module directly.

When to import this module

Import Plushie.Canvas.Shape when you build shapes in standalone helper functions (defp) outside a Plushie.UI canvas block:

import Plushie.Canvas.Shape

defp draw_indicator(x, y, color) do
  [
    circle(x, y, 6, fill: color),
    circle(x, y, 3, fill: "#fff")
  ]
end

Inside Plushie.UI canvas/layer/group blocks, all shape functions are already in scope via import Plushie.UI -- no extra import needed.

Basic shapes

rect(10, 20, 100, 50, fill: "#ff0000")
circle(50, 50, 25, stroke: stroke("#000", 2))
line(0, 0, 100, 100, stroke: stroke("#333", 1, cap: "round"))
text(10, 10, "Hello", fill: "#000", size: 16)

Paths

path([move_to(0, 0), line_to(100, 0), line_to(50, 80), close()],
  fill: "#0088ff",
  stroke: stroke("#000", 2)
)

Transforms

Transform commands are interleaved with shapes in a layer's shape list:

[
  push_transform(),
  translate(100, 100),
  rotate(:math.pi() / 4),
  rect(0, 0, 50, 50, fill: "#f00"),
  pop_transform()
]

Clipping

Clip regions restrict drawing to a rectangular area:

[
  push_clip(10, 10, 100, 80),
  rect(0, 0, 200, 200, fill: "#ff0000"),
  pop_clip()
]

Clip regions nest -- inner clips are intersected with outer clips.

Per-shape opacity

All shapes (except SVG) accept an :opacity option (0.0-1.0) that multiplies into the fill and stroke color alpha channels:

rect(0, 0, 100, 100, fill: "#ff0000", opacity: 0.5)
circle(50, 50, 25, stroke: stroke("#000", 2), opacity: 0.3)

Text alignment

The text/4 builder accepts :align_x and :align_y options:

text(100, 50, "Centered", fill: "#000", align_x: "center", align_y: "center")

Valid values for :align_x: "left", "center", "right". Valid values for :align_y: "top", "center", "bottom".

Gradients

Use linear_gradient/3 as a fill value:

rect(0, 0, 200, 100,
  fill: linear_gradient({0, 0}, {200, 0}, [{0.0, "#ff0000"}, {1.0, "#0000ff"}])
)

Interactive shapes

Make shapes interactive by placing them in a named group with interaction opts:

group "btn", on_click: true, cursor: "pointer" do
  rect(0, 0, 100, 40, fill: "#3498db")
end