Paint

Paint describes how one draw is coloured and composited. There is no global drawing state: each command takes the paint it needs. Reuse a paint when the same style appears across several draws.

A paint starts as a solid colour. Coordinates and sizes on the draw itself use logical pixels with y downward.

use valo::{Color, Paint, Rect};

let paint = Paint::from_color(Color::rgb(0.78, 1.0, 0.24));
builder.draw_rect(Rect::new(40.0, 40.0, 240.0, 140.0), &paint);

const paint = new Paint(0.78, 1, 0.24, 1);
builder.drawRect(40, 40, 240, 140, paint);

The scene is JavaScript. Change colour, stroke width, or blur sigma and it redraws.

Colour components are straight-alpha sRGB in 0..=1. Shader and image draws use only the paint's alpha and ignore its RGB channels.

Fill and stroke

Style is fill by default. A stroke paint controls width, caps, joins, and miter limit. Width 0 is a hairline (one device pixel); only a negative width draws nothing.

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

let stroke = Paint {
    color: Color::BLACK,
    style: PaintStyle::Stroke(Stroke {
        width: 4.0,
        cap: Cap::Round,
        join: Join::Round,
        miter_limit: 4.0,
        dash: None,
    }),
    ..Paint::default()
};

paint.setStroke(4, 1, 1, 4, [], 0);
// cap: 0 butt, 1 round, 2 square. join: 0 miter, 1 round, 2 bevel.

Blend, blur, and shaders

A paint can also carry:

• Blend mode (default src-over)
• Mask blur
• A colour filter, applied before mask blur
• An image filter
• A shader: linear, radial, or sweep gradient, or an image pattern

Effects belong to the paint, not to the builder. In JavaScript, integer mode arguments outside their documented range use the default rather than throwing.

Next: DisplayListBuilder.