Skip to main content

Canvas

The Canvas allows the drawing of custom content.

component Canvas
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​

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: fun (Painter, Rect)​

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.

Painter​

class Painter

Methods​

draw_arc(center: Point, radius: Float, start_angle: Angle, end_angle: Angle)​

Draws an arc around center with the given radius, spanning from start_angle to end_angle.

A positive angle will draw counter-clockwise.

draw_circle(center: Point, radius: Float)​

Draws a circle centered at the given center with radius.

draw_ellipse(_ frame: Rect)​

Draws an ellipse into the given frame.

draw_line(from: Point, to: Point)​

Draws a line starting at from to to.

draw_path(_ path: Path)​

Draws the given path.

See Path

draw_pie(frame: Rect, start_angle: Angle, end_angle: Angle)​

Draws a pie shape into the given frame, spanning from start_angle to end_angle.

A positive angle will draw counter-clockwise.

draw_rect(_ frame: Rect)​

Draws a rectangle into the given frame.

restore()​

Restores a previously saved painter state. See save.

rotate(_ angle: Angle)​

Rotates the coordinate system clockwise.

save()​

Save the current painter state onto a stack. Use restore to rewind the painter to a previously saved state.

scale(x: Float, y: Float)​

Scales the coordinate system by x & y.

set_dash_offset(_ offset: Float)​

Offsets the starting point of the dash pattern. The offset is measured in terms of the units used to specify the dash pattern.

set_dash_pattern(_ pattern: [Float])​

Set the dash pattern for drawing the strokes. The array must specify an even number of positive numbers. The even entries define the dashes and the odd entries the spaces. The dash pattern is specified in units of the line width, e.g. a dash of length 4 in line width 10 is 40 pixels long. Note that a zero line width is equivalent to a 1 pixel width.

To enable solid line drawing set an empty pattern.

The dashes are also subject to the cap style, see set_line_cap

set_fill(_ color: Color?)​

Sets the fill color for drawing. Set to nil to disable drawing fills.

set_line_cap(_ cap: CapStyle)​

Defines how to draw the end caps of a line. See CapStyle

set_line_join(_ join: JoinStyle)​

Defines how two lines are joined. See JoinStyle

set_line_width(_ width: Float)​

Sets the width of the stroke.

set_opacity(_ value: Float)​

Sets the opacity of the painter. The value should be in the range 0.0 and 1.0.

set_stroke(_ color: Color?)​

Sets the stroke color for drawing. Set to nil to disable drawing strokes.

shear(h: Float, v: Float)​

Shears the coordinate system by h & v.

translate(x: Float, y: Float)​

Translates the coordinate system by x & y.

enum CapStyle​

flat:​

A square line that does not cover the end point of the stroke.

round:​

A rounded line.

square:​

A square line that covers the end point and extends beyond it by half of the line width.

Cap Styles

enum JoinStyle​

round:​

Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.

bevel:​

Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.

miter:​

Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area.

Join Styles