Skip to main content

Styling

Configuration types for Paint styles, blend modes, and gradients.


PaintDefinition​

Partial set of paint properties for initializing or updating a Paint. All fields are optional.

Fields​

FieldTypeDescription
stylePaintStyleFill or stroke mode
colorColorPaint color
thicknessnumberStroke width
capStrokeCapLine ending style
joinStrokeJoinCorner style
blendModeBlendModeCompositing mode
feathernumberFeathering amount
gradientGradient?Gradient fill (false to remove)

Example​

local paint = Paint.with({
style = "fill",
color = Color.rgb(255, 0, 0),
blendMode = "multiply",
})

-- Update with copy
local highlight = paint:copy({
color = Color.rgb(255, 255, 0)
})

See Also: Paint, PaintStyle


PaintStyle​

Specifies how shapes are painted.

Values​

ValueDescription
fillPaints the interior of the shape
strokePaints the outline of the shape

Example​

local fillPaint = Paint.with({ style = "fill" })
local strokePaint = Paint.with({ style = "stroke", thickness = 2 })

See Also: Paint, PaintDefinition


BlendMode​

Defines how paint color is composited with content behind it.

Values​

ValueDescription
srcOverNormal blending (default)
multiplyDarkens by multiplying colors
screenLightens by screening colors
overlayCombines multiply and screen
darkenKeeps darker color
lightenKeeps lighter color
colorDodgeBrightens to reflect source
colorBurnDarkens to reflect source
hardLightHard spotlight effect
softLightSoft spotlight effect
differenceSubtracts colors
exclusionSimilar to difference, lower contrast
hueApplies source hue
saturationApplies source saturation
colorApplies source hue and saturation
luminosityApplies source luminosity

BlendMode values are string literals, not namespaced constants.

Example​

local paint = Paint.with({
style = "fill",
color = Color.rgba(255, 0, 0, 128),
blendMode = "multiply",
})

See Also: Paint, PaintDefinition


StrokeCap​

Defines the shape at the ends of open stroke segments.

Values​

ValueDescription
buttSquared end, no extension
roundSemicircular cap
squareSquared end, extends past endpoint

Example​

local paint = Paint.with({
style = "stroke",
thickness = 4,
cap = "round",
})

See Also: StrokeJoin, Paint


StrokeJoin​

Defines how two stroke segments connect at a corner.

Values​

ValueDescription
miterSharp corner
roundRounded corner
bevelFlattened corner

Example​

local paint = Paint.with({
style = "stroke",
thickness = 4,
join = "round",
})

See Also: StrokeCap, Paint


GradientStop​

A color stop in a Gradient, defined by position and color.

Attributes​

AttributeTypeDescription
positionnumberPosition along gradient (0.0 - 1.0)
colorColorColor at this position

Example​

local gradient = Gradient.linear(
Vector.xy(0, 0),
Vector.xy(100, 0),
{
{ position = 0, color = Color.rgb(255, 0, 0) },
{ position = 0.5, color = Color.rgb(255, 255, 0) },
{ position = 1, color = Color.rgb(0, 255, 0) },
}
)

See Also: Gradient, Color

Next Steps​