Canvas

The Canvas widget provides a 2D drawing surface for custom graphics.

Availability: Canvas is wired in the LLVM codegen path (macOS, iOS, Linux, Android) and the JS / web / wasm codegen path. Closed via #190. The snippets below are compile-link verified by the doc-tests harness against docs/examples/ui/canvas/snippets.ts; see that file for the full standalone program.

The drawing API is method-based on the canvas handle (matching the FFI shape — perry_ui_canvas_set_fill_color(handle, r, g, b, a) etc.). Colors are RGBA floats in [0.0, 1.0].

Creating a Canvas

const canvas = Canvas(400, 300)
canvas.setFillColor(1.0, 0.4, 0.0, 1.0)
canvas.fillRect(10, 10, 100, 80)

Canvas(width, height) creates a canvas widget; subsequent draw operations are method calls on the returned handle.

Drawing Shapes

Rectangles

canvas.setFillColor(1.0, 0.0, 0.0, 1.0)    // red
canvas.fillRect(10, 10, 100, 80)

canvas.setStrokeColor(0.0, 0.0, 1.0, 1.0)  // blue
canvas.setLineWidth(2)
canvas.strokeRect(150, 10, 100, 80)

Lines

canvas.setStrokeColor(0.0, 0.0, 0.0, 1.0)
canvas.setLineWidth(1)
canvas.beginPath()
canvas.moveTo(10, 10)
canvas.lineTo(200, 150)
canvas.stroke()

Circles and Arcs

canvas.setFillColor(0.0, 1.0, 0.0, 1.0)
canvas.beginPath()
canvas.arc(200, 150, 50, 0, Math.PI * 2)  // x, y, radius, startAngle, endAngle
canvas.fill()

Text

canvas.setFillColor(0.0, 0.0, 0.0, 1.0)
canvas.setFont("16px sans-serif")
canvas.fillText("Hello Canvas!", 50, 50)

Platform Notes

Next Steps

• Widgets — All available widgets
• Animation — Animating widget properties
• Styling — Widget styling