Canvas for drawing shapes, organized into named layers.

Layers are a map of layer names to shape lists. Each layer maps to an iced Cache on the Rust side -- only changed layers are re-tessellated. This prevents performance footguns when rendering thousands of shapes in a stable layer.

Shape descriptors are plain maps with string keys. Use Plushie.Canvas.Shape for convenience builders, or construct maps directly.

Do-block form

The canvas macro in Plushie.UI supports a do-block form that collects layers declaratively:

import Plushie.UI

canvas "chart", width: 400, height: 300 do
  layer "grid" do
    rect(0, 0, 400, 300, stroke: "#eee")
  end
  layer "data" do
    for bar <- bars do
      rect(bar.x, bar.y, bar.w, bar.h, fill: bar.color)
    end
  end
end

Props

• layers (map of string => list of maps) -- named layers of shape descriptors. Each layer is independently cached. Shapes within a layer are drawn in order. Layers are drawn in alphabetical order by name.
• shapes (list of maps) -- flat list of shape descriptors. Convenience alternative to layers for canvases that don't need named layers.
• width (length) -- canvas width. Default: fill. See Plushie.Type.Length.
• height (length) -- canvas height. Default: 200px.
• background (color) -- canvas background color. See Plushie.Type.Color.
• interactive (boolean) -- enables all mouse event handlers. Default: false.
• on_press (boolean) -- enable mouse press events. Default: false.
• on_release (boolean) -- enable mouse release events. Default: false.
• on_move (boolean) -- enable mouse move events. Default: false.
• on_scroll (boolean) -- enable mouse scroll events. Default: false.
• alt (string) -- accessible label for the canvas. Sits outside the a11y object. See "Widget-specific accessibility props" in docs/reference/accessibility.md.
• description (string) -- extended accessible description for the canvas. Sits outside the a11y object.
• a11y (map) -- accessibility overrides. See Plushie.Type.A11y.

Shape types

Shapes are plain maps. See Plushie.Canvas.Shape for builder functions.

• %{type: "rect", x: x, y: y, w: w, h: h} -- rectangle.
• %{type: "circle", x: x, y: y, r: r} -- circle.
• %{type: "line", x1: x1, y1: y1, x2: x2, y2: y2} -- line.
• %{type: "text", x: x, y: y, content: text} -- text.
• %{type: "path", commands: [...]} -- arbitrary path.
• %{type: "image", source: path, x: x, y: y, w: w, h: h} -- image.
• %{type: "svg", source: path, x: x, y: y, w: w, h: h} -- SVG.

All shapes accept optional fill (hex color or gradient) and stroke fields.

Events

Canvas background events (coordinate-level, unified pointer types):

• %WidgetEvent{type: :press, id: id, data: %{x: x, y: y, button: button, pointer: pointer, modifiers: mods}}
• %WidgetEvent{type: :release, id: id, data: %{x: x, y: y, button: button, pointer: pointer, modifiers: mods}}
• %WidgetEvent{type: :move, id: id, data: %{x: x, y: y, pointer: pointer, modifiers: mods}}
• %WidgetEvent{type: :scroll, id: id, data: %{x: x, y: y, delta_x: dx, delta_y: dy, pointer: pointer, modifiers: mods}}
• %WidgetEvent{type: :enter, id: id}
• %WidgetEvent{type: :exit, id: id}

Interactive shape events (semantic, from shapes with interactive field):

• %WidgetEvent{type: :click, id: element_id, scope: [canvas_id | ...]}

• %WidgetEvent{type: :enter, id: id}
• %WidgetEvent{type: :exit, id: id}
• %WidgetEvent{type: :drag, id: id, data: %{x: x, y: y, delta_x: dx, delta_y: dy}}
• %WidgetEvent{type: :drag_end, id: id, data: %{x: x, y: y}}
• %WidgetEvent{type: :focused, id: id}
• %WidgetEvent{type: :blurred, id: id}
• %WidgetEvent{type: :key_press, id: id, data: %{key: key, modifiers: mods, text: text}}
• %WidgetEvent{type: :key_release, id: id, data: %{key: key, modifiers: mods}}

Canvas element clicks arrive as regular :click events with the element ID as the event id and the canvas ID in the scope. Other element events use standard generic event families.