Skip to main content

Canvas

The Canvas allows the drawing of custom content.

component Canvas

Example​

import { Canvas, Painter, Rect } from ui

export var main = Canvas(
    paint: fun (painter: Painter, frame: Rect) {
        painter.set_fill(Color(0xFF20639B))
        painter.draw_rect(frame)
    }
)

Canvas Example

Note

Heavy use of the Canvas component can lead to performance issues, so avoid it if alternative implementations are possible.

Constructor​

constructor(background_color: Color = Color(0x00000000), opaque: Bool = false, paint: (Painter, Rect) -> () = fun (_, _) {})
background_color: Color = Color(0x00000000)

The background color to fill the canvas with.

opaque: Bool = false

Set this to true if the Canvas doesn't need to be blended with the rest of your UI to speed up drawing.

paint: (Painter, Rect) -> () = fun (_, _) {}

The paint handler is invoked whenever the Canvas needs to be painted. Use the Painter argument to draw into the canvas. The second argument is the bounding box of the canvas.

The paint function is automatically called again if any properties or state used in it have changed.

Layout Behavior​

Always fills the available area.