valo
Drawing

Strokes

Width, caps, joins, miters, and dashes.

A stroke is a Paint style, not a separate draw. Width is in path coordinates. Width 0 is a hairline (one device pixel); a negative width draws nothing.

use valo::{Cap, Dash, Join, Paint, PaintStyle, Stroke};

let paint = Paint {
    style: PaintStyle::Stroke(Stroke {
        width: 4.0,
        cap: Cap::Round,
        join: Join::Round,
        miter_limit: 4.0,
        dash: Some(Dash {
            intervals: vec![10.0, 6.0],
            phase: 0.0,
        }),
    }),
    ..Paint::from_color(Color::rgb(0.78, 1.0, 0.24))
};
paint.setStroke(4, Cap.Round, Join.Round, 4, new Float32Array([10, 6]), 0);

Round caps, square caps with bevel joins, then a dashed miter.

scene.jsplayground
loading editor
liveacquiring device

Caps

CapEnd of an open contour
ButtStops at the endpoint
RoundSemicircle
SquareExtends by half the width

Joins

JoinCorner
MiterOuter edges meet, until the miter limit
RoundCircular arc
BevelStraight cut

miter_limit is miter length over half-width. The default is 4. Longer miters become bevels.

Dashes

intervals alternates painted and skipped lengths, starting with painted. phase walks into that cycle. Dashing runs on the flattened contour before the stroker, so caps and joins apply to each dash.

On this page