#Paint

CK.Paint describes how a draw call paints. A Path is geometry; canvas.drawPath(path, paint) consumes a Paint to decide color, fill-vs-stroke, anti-aliasing, blend mode, dashes, blurs, gradients, and filters. The same Paint can be reused across many draws — and should be, because new CK.Paint() is a WASM allocation.

A Paint is a WASM object — call paint.delete() when finished. Skia does not retain a reference after a draw call, so you can mutate or delete the paint immediately after drawX(...) returns.

const fill = new CK.Paint();
fill.setColor(CK.Color(40, 90, 180, 0.4));
fill.setAntiAlias(true);

const edge = new CK.Paint();
edge.setStyle(CK.PaintStyle.Stroke);
edge.setStrokeWidth(4);
edge.setColor(CK.Color(40, 90, 180, 1));
edge.setAntiAlias(true);

const r = CK.RRectXY(CK.LTRBRect(60, 60, 360, 196), 24, 24);

canvas.clear(CK.WHITE);
canvas.drawRRect(r, fill);
canvas.drawRRect(r, edge);
surface.flush();

fill.delete();
edge.delete();

The same RRect drawn twice — once with a fill paint, once with a stroke paint. Stack stroke + fill paints to get the classic "outlined shape" look.

#Style: fill vs stroke

paint.setStyle(CK.PaintStyle.Fill) is the default. Stroke outlines the path with stroke width + cap + join + dash. StrokeAndFill does both in one draw call (slightly cheaper than two separate draws).

#Stroke geometry

Strokes use setStrokeWidth, setStrokeCap, setStrokeJoin, setStrokeMiter. Caps render at the open ends of an unclosed path; joins render at corners. setPathEffect(MakeDash) turns the stroke into a dash pattern.

const cap  = controls.select('cap',  ['Butt', 'Round', 'Square'], 'Round');
const join = controls.select('join', ['Miter', 'Round', 'Bevel'],  'Round');

const path = new CK.Path();
path.moveTo(60, 60); path.lineTo(360, 60); path.lineTo(60, 196); path.lineTo(360, 196);

const stroke = new CK.Paint();
stroke.setStyle(CK.PaintStyle.Stroke);
stroke.setStrokeWidth(16);
stroke.setColor(CK.Color(40, 90, 180, 1));
stroke.setAntiAlias(true);

loop(() => {
  stroke.setStrokeCap(CK.StrokeCap[cap()]);
  stroke.setStrokeJoin(CK.StrokeJoin[join()]);
  canvas.clear(CK.WHITE);
  canvas.drawPath(path, stroke);
  surface.flush();
});

#Blend modes

setBlendMode chooses how the source pixels combine with the destination. Default is SrcOver. See BlendMode for the full list and formulas.

#Filters

Three filter slots, applied in this order: ImageFilter → ColorFilter → MaskFilter. Each is its own WASM object you allocate via the corresponding factory:

• setImageFilter(filter) — operates on the rasterized pixels (blur, drop shadow, displacement). See ImageFilter.
• setColorFilter(filter) — operates on each color channel (matrix, blend, gamma). See ColorFilter.
• setMaskFilter(filter) — operates on the alpha mask before rasterization (blur the outline of the shape).

Pass null to clear a slot. Pass a different filter to replace.

#Shaders

setShader(shader) provides per-pixel color from a Shader (gradients, runtime SkSL, image samplers). When set, setColor is ignored — the shader's color wins.

#Common methods

#See also

• Path — geometry passed alongside.
• BlendMode — for setBlendMode.
• ImageFilter, ColorFilter, Shader, PathEffect, MaskFilter — filters and effects.
• Memory management — when to delete.